Design Studio AI

Editable Visual Design is an open-source, coding-agent-driven toolkit for creating editable visual artifacts from prompts. A persistent coding agent interprets a brief, plans a composition, generates assets, implements the design in semantic HTML, renders and observes the result, and applies repairs. An image model supplies visual direction for composition, hierarchy, color, and spatial relationships, while the delivered artifact rebuilds typography and layout in HTML rather than shipping reference pixels. The resulting artifact contains real text, independent assets, selectable and movable layers, a visual editor, rendered PNG output, an animated layer breakdown, and a replayable creation process. Deterministic checks cover the canvas, fonts, layer contracts, rendering, and editor round trips. The repository distributes the workflow as two Codex skills, including editable-design for fixed-canvas designs and a separate html-to-pptx skill for converting compatible HTML designs into editable presentations.

Doop is an open-source multiplayer design canvas where people and AI agents create and edit designs together. Each canvas contains frames that render real HTML in sandboxed iframes; humans edit in the browser, while agents connect through the built-in Model Context Protocol (MCP) server and can create frames, stream HTML in chunks, inspect screenshots, and revise designs. The app synchronizes cursors, presence, frame edits, agent status, comments, tasks, and activity over WebSocket rooms, and includes a server-side Doop Agent that can process queued cards, mentions, and feedback through specialist roles. Canvases are private by default, with email invitations or optional link sharing, and agents inherit the access of the user who authenticates them. Doop also provides design-memory features for exemplar frames, decisions, and proposed style rules, and can be self-hosted with Docker Compose or Bun using embedded Postgres through PGlite.

AI Design Skills is an MIT-licensed collection of Markdown design skills for AI coding tools such as Claude Code, Cursor, Codex, Windsurf, and Cline. Its skills provide coding agents with guidance for landing-page strategy, page structure, conversion copy, typography, spacing, visual systems, border radius, and motion. Each skill is stored as a self-contained folder with a SKILL.md file that can be copied into an agent's project-rules directory, added to a system prompt, or uploaded to a Claude.ai project. The repository currently documents a landing-page-design skill that asks intake questions, builds the page structure and copy, and defines the visual system; its design values are grouped in an editable section so users can change fonts, colors, spacing, and motion. The collection can be forked and used, modified, distributed, or used in commercial work under the MIT license.