PR Design Doc
OpenHands/OpenHands
For a non-trivial pull request, write a self-contained HTML design doc under the temporary .pr/ directory and link a visibility-appropriate preview in the PR description, so maintainers grasp the…
Workflow skill that turns one issue/requirement into a design in the order "verify real code & data → iterate faithful HTML mockups → design doc (.md) → delegate implementation." When designing a…
Install Design From Code
$ npx skills add ccplugins/awesome-claude-code-plugins --skill design-from-code -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ccplugins/awesome-claude-code-plugins design-from-code --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/ccplugins/awesome-claude-code-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/design-from-code/skills/design-from-code .claude/skills/design-from-code && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-from-code" agent skill from https://github.com/ccplugins/awesome-claude-code-plugins/tree/main/plugins/design-from-code/skills/design-from-code into .claude/skills/design-from-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-from-code", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/ccplugins/awesome-claude-code-plugins/tree/main/plugins/design-from-code/skills/design-from-codeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add ccplugins/awesome-claude-code-plugins --skill design-from-code -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ccplugins/awesome-claude-code-plugins design-from-code --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ccplugins/awesome-claude-code-plugins.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/design-from-code/skills/design-from-code .agents/skills/design-from-code && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-from-code" agent skill from https://github.com/ccplugins/awesome-claude-code-plugins/tree/main/plugins/design-from-code/skills/design-from-code into .agents/skills/design-from-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-from-code", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ccplugins/awesome-claude-code-plugins --skill design-from-code -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ccplugins/awesome-claude-code-plugins design-from-code --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ccplugins/awesome-claude-code-plugins.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/design-from-code/skills/design-from-code .cursor/skills/design-from-code && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-from-code" agent skill from https://github.com/ccplugins/awesome-claude-code-plugins/tree/main/plugins/design-from-code/skills/design-from-code into .cursor/skills/design-from-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-from-code", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/ccplugins/awesome-claude-code-plugins.git --path plugins/design-from-code/skills/design-from-code--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add ccplugins/awesome-claude-code-plugins --skill design-from-code -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ccplugins/awesome-claude-code-plugins design-from-code --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ccplugins/awesome-claude-code-plugins.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/design-from-code/skills/design-from-code .gemini/skills/design-from-code && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-from-code" agent skill from https://github.com/ccplugins/awesome-claude-code-plugins/tree/main/plugins/design-from-code/skills/design-from-code into .gemini/skills/design-from-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-from-code", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install ccplugins/awesome-claude-code-plugins design-from-codeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add ccplugins/awesome-claude-code-plugins --skill design-from-code -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ccplugins/awesome-claude-code-plugins.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/design-from-code/skills/design-from-code .github/skills/design-from-code && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-from-code" agent skill from https://github.com/ccplugins/awesome-claude-code-plugins/tree/main/plugins/design-from-code/skills/design-from-code into .github/skills/design-from-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-from-code", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ccplugins/awesome-claude-code-plugins --skill design-from-code -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ccplugins/awesome-claude-code-plugins design-from-code --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ccplugins/awesome-claude-code-plugins.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/design-from-code/skills/design-from-code .opencode/skills/design-from-code && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-from-code" agent skill from https://github.com/ccplugins/awesome-claude-code-plugins/tree/main/plugins/design-from-code/skills/design-from-code into .opencode/skills/design-from-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-from-code", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-from-code- GitHub stars
- 967
- Token cost
- ~1.3k tokens
- SKILL.md length
- 602 words
- Files
- 6 (incl. references)
- Skills in repo
- 68
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Workflow skill that turns one issue/requirement into a design in the order "verify real code & data → iterate faithful HTML mockups → design doc (.md) → delegate implementation." When designing a…
- Works in 7 steps: No guessing — read the code. "How does… → Reproduce the real component faithfully.… → Pictures over prose. Iterate with… → …
- (EN) design this
- SKILL.md covers When to use, When NOT to use, Core principles (these… and The 8-step workflow, plus 2 more sections
- Calls gh
What it does
Design From Code is an agent skill from ccplugins/awesome-claude-code-plugins. Workflow skill that turns one issue/requirement into a design in the order "verify real code & data → iterate faithful HTML mockups → design doc (.md) → delegate implementation." When designing a change to existing UI, it reads the actual component source and data model instead of imagining them, and reproduces the current screen pixel-for-pixel. Triggers (EN) "design this", "make a mockup", "how should this feature look", "add ~ to the existing screen"; (KO) "설계해줘", "시안 만들어줘", "이 기능 어떻게 보여줄지", "기존 화면에 ~ 추가".
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `examples/issue-976-walkthrough.md`, `references/code-fidelity-reproduction.md` and `references/data-model-verification.md`).
It sits in Development, covering Architecture decision records. The repository describes itself as: Awesome Claude Code plugins — a curated list of slash commands, subagents, MCP servers, and hooks for Claude Code. The licence is Apache-2.0.
When your agent uses it
- (EN) design this
- How should this feature look
- Add ~ to the existing screen
Example prompts
- “design this”
- “make a mockup”
- “how should this feature look”
- “/design-from-code”
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- No guessing — read the code. "How does this stat work?" is wrong ~100% of the time if you imagine it. Trace handler→query→schema all the…
- Reproduce the real component faithfully. Before any new mockup, draw the current state (AS-IS) exactly as the real JSX renders it…
- Pictures over prose. Iterate with self-contained HTML you can see and fix. Bump the version (v2, v3…) on every round of feedback. →…
- Confirm one decision at a time. "A vs B?" → "7-day window?" → "monotone color?" — ask narrowly.
- Mark keep / new / changed. When "leave the rest as-is" is a requirement, use 🟦keep / 🟩new / 🟨changed color tags to show what you are…
- Empty / initial state is first-class. Always design the data-zero (new user) screen alongside the populated one.
- Delegate the build, but verification is mandatory. Close it out with build / type-check / tests.
What it can do on your machine
Read from SKILL.md and the folder at commit 5bd4f16. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
gh
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use gh, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design From Code loads about 1.3k tokens when it runs, and up to ~6.3k if it reads all its reference files. Until then it costs about 133 tokens; SKILL.md has 602 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from ccplugins/awesome-claude-code-plugins at commit 5bd4f16, republished under its Apache-2.0 licence (© ccplugins). 602 words, ~1,271 tokens.
Download SKILL.mdSave it as
.claude/skills/design-from-code/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.- name
- design-from-code
- description
- Workflow skill that turns one issue/requirement into a design in the order "verify real code & data → iterate faithful HTML mockups → design doc (.md) → delegate implementation." When designing a change to existing UI, it reads the actual component source and data model instead of imagining them, and reproduces the current screen pixel-for-pixel. Triggers (EN) "design this", "make a mockup", "how should this feature look", "add ~ to the existing screen"; (KO) "설계해줘", "시안 만들어줘", "이 기능 어떻게 보여줄지", "기존 화면에 ~ 추가".
design-from-code — design mockups grounded in real source
One line: lock facts with code → agree via HTML → nail it in a
.md→ ship by delegating. The key difference: mockups are not imagined. They are reproduced down to the pixel and the number by reading the real component JSX and data queries.
When to use
- Designing a change that adds or modifies something in an existing screen/component (e.g. "add a metrics card to the bottom bar")
- UI re-layout / emphasis requests like "it's hard to see / I want it shown like this"
- Exposing data (numbers, stats) on screen when you need to pin down exactly what each number counts
- When the user says "mockup first / show me in HTML"
When NOT to use
- Pure backend/CLI work, changes with no UI
- A simple, already-agreed bug fix (no mockup needed)
Core principles (these override every other decision)
- No guessing — read the code. "How does this stat work?" is wrong ~100% of the time if you imagine it. Trace handler→query→schema all the way down, confirm it as fact, then design. →
references/data-model-verification.md - Reproduce the real component faithfully. Before any new mockup, draw the current state (AS-IS) exactly as the real JSX renders it. Schematic drawings cause misunderstandings. →
references/code-fidelity-reproduction.md(★ the heart of this skill) - Pictures over prose. Iterate with self-contained HTML you can see and fix. Bump the version (v2, v3…) on every round of feedback. →
references/html-mockup-recipe.md - Confirm one decision at a time. "A vs B?" → "7-day window?" → "monotone color?" — ask narrowly.
- Mark keep / new / changed. When "leave the rest as-is" is a requirement, use 🟦keep / 🟩new / 🟨changed color tags to show what you are not touching.
- Empty / initial state is first-class. Always design the data-zero (new user) screen alongside the populated one.
- Delegate the build, but verification is mandatory. Close it out with build / type-check / tests.
Show full SKILL.md (296 more words)Show less
The 8-step workflow
| # | Step | Key tools | Detail |
|---|---|---|---|
| 1 | Read the issue verbatim | Bash + gh issue view | Don't open GitHub via WebFetch (auth fails) |
| 2 | Map the code | Agent(Explore) ×N | Get just the conclusions for related components/hooks/schema |
| 3 | Verify the data | Bash (grep/sed) + Explore | handler→use-case→repository→schema. references/data-model-verification.md |
| 4 | HTML mockup v1 | Write (.html) + SendUserFile | Phone frame, 2–3 options, per-state, inline SVG. references/html-mockup-recipe.md |
| 5 | User confirmation | reply / AskUserQuestion | Confirm one at a time; v2, v3 per feedback |
| 6 | Faithful AS-IS/TO-BE | Bash (read JSX with sed) + Write | Extract real render fns/classes/labels → HTML. references/code-fidelity-reproduction.md |
| 7 | Design doc .md | Write | Approved mockup + verified data model + build entry points + phases |
| 8 | Delegate + verify | Agent (language expert) + direct | Delegate with the contract & verify commands baked in; close with build/tests |
Reference files
references/code-fidelity-reproduction.md— ★ concrete technique for reading the real component with sed and reproducing it 1:1 in HTML (workedrenderSegexample)references/data-model-verification.md— how to trace the data model all the way down (events-table username-attribution example)references/html-mockup-recipe.md— recipe for self-contained HTML (phone frame, inline-SVG charts, design tokens, empty state)references/prompt-templates.md— copy-paste prompts for each stepexamples/issue-976-walkthrough.md— the full flow of a real case (v1→v5, including the point where the user corrected "top/bottom is reversed")
Common mistakes (checklist)
- Wrote data behavior from a guess → did you confirm it in code?
- Mockup is schematic so it differs from reality → did you read the real JSX and reproduce classes & labels?
- Asked several decisions at once and caused confusion → did you confirm one at a time?
- "Keep existing" was the requirement but it's unclear what stays untouched → did you add keep/new/changed tags?
- Forgot the empty / initial state (data-zero) → did you include the empty-state design?
- Pulled in a chart library for the graph → did you use inline SVG instead?
- Skipped build/type-check after implementing → did you close it out with verification commands?
© ccplugins, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 5 other files (references) in plugins/design-from-code/skills/design-from-code of ccplugins/awesome-claude-code-plugins.
- SKILL.md
- examples/issue-976-walkthrough.md
- references/code-fidelity-reproduction.md
- references/data-model-verification.md
- references/html-mockup-recipe.md
- references/prompt-templates.md
Open the folder on GitHubat commit 5bd4f16
Compare with similar skills
Design From Code next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design From Code this skillccplugins/awesome-claude-code-plugins | 967 | — | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| PR Design DocOpenHands/OpenHands | 90k | — | ~2.4k | Automated safety check: Pass | MIT | |
| Cto AdvisorIbrahim-3d/orchestrator-supaconductor | 380 | 4 repos | ~2.4k | Automated safety check: Pass | MIT | |
| Improve Codebase Architectureywwynm/EverythingDone | 144 | 15 repos | ~1.3k | Automated safety check: Pass | GPL-3.0 | |
| Domain Modelingbrim-borium/spotify_sdk | 166 | 5 repos | ~806 | Automated safety check: Pass | Apache-2.0 | |
| Design Doc MermaidSpillwaveSolutions/design-doc-mermaid | 175 | 1 repos | ~5.6k | Automated safety check: Pass | None |
Similar skills
Cto Advisor
Ibrahim-3d/orchestrator-supaconductor
Technical leadership guidance for engineering teams, architecture decisions, and technology strategy.
Improve Codebase Architecture
ywwynm/EverythingDone
Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/.
Domain Modeling
brim-borium/spotify_sdk
Build and sharpen a project's domain model. An agent skill from brim-borium/spotify_sdk.
Design Doc Mermaid
SpillwaveSolutions/design-doc-mermaid
Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.
Learning Opportunities
DrCatHicks/learning-opportunities
Facilitates deliberate skill development during AI-assisted coding.
More from ccplugins/awesome-claude-code-plugins
All 68 skills in this repoAI Meeting
ccplugins/awesome-claude-code-plugins
Run structured AI meetings for plans, product ideas, technical designs, business decisions, feature proposals, and strategy choices.
Fastapi App
ccplugins/awesome-claude-code-plugins
Bootstrap a new FastAPI backend with async SQLAlchemy 2.0, asyncpg, Alembic, Pydantic v2, and no deprecated APIs.
Flutter App
ccplugins/awesome-claude-code-plugins
Bootstrap a new Flutter mobile app with clean architecture, Riverpod, FVM-pinned SDK, current packages, and no deprecated APIs.
Nextjs App
ccplugins/awesome-claude-code-plugins
Bootstrap a new Next.js (App Router, TypeScript) web app with current packages and no deprecated APIs.
Dev Report
ccplugins/awesome-claude-code-plugins
Write up a coding session for a non-technical stakeholder — the context, what was built, and the engineering reasoning behind it — the way a senior engineer briefs a product manager who does not…
Difesa Attacchi
ccplugins/awesome-claude-code-plugins
Aggiunge a un sito/app un agente di difesa che rileva e blocca richieste malevole (SQL injection, XSS, path traversal, brute force, bot) con rate limiting, blocklist IP e modalità lockdown che…
Related
Categories
Questions about Design From Code
What does Design From Code do?
Workflow skill that turns one issue/requirement into a design in the order "verify real code & data → iterate faithful HTML mockups → design doc (.md) → delegate implementation." When designing a…. Design From Code is an agent skill from ccplugins/awesome-claude-code-plugins." When designing a change to existing UI, it reads the actual component source and data model instead of imagining them, and reproduces the current screen pixel-for-pixel.
When should I use Design From Code?
Design From Code fits situations like: (EN) design this; how should this feature look; add ~ to the existing screen.
How do I install Design From Code in Claude Code?
Run `npx skills add ccplugins/awesome-claude-code-plugins --skill design-from-code -a claude-code`. Or copy the skill folder (plugins/design-from-code/skills/design-from-code in ccplugins/awesome-claude-code-plugins) into .claude/skills/design-from-code in your project. Claude Code loads it when a task matches its description.
How do I install Design From Code in Codex?
Run `npx skills add ccplugins/awesome-claude-code-plugins --skill design-from-code -a codex`. Or copy the skill folder (plugins/design-from-code/skills/design-from-code in ccplugins/awesome-claude-code-plugins) into .agents/skills/design-from-code in your project. Codex loads it when a task matches its description.
Can I use Design From Code in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ccplugins/awesome-claude-code-plugins --skill design-from-code -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-from-code, .gemini/skills/design-from-code, .github/skills/design-from-code and .opencode/skills/design-from-code in your project.
What does Design From Code need to run?
Going by SKILL.md and its folder, Design From Code needs the command-line tools its instructions call (gh).
Does Design From Code access the network?
SKILL.md contains no URLs. Its commands use gh, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Design From Code safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Design From Code use?
Design From Code is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design From Code use?
About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.1k tokens, read only when the agent opens those files.
What are the alternatives to Design From Code?
Skills that share tags, products or a category with Design From Code: PR Design Doc (OpenHands/OpenHands, 90k stars), Cto Advisor (Ibrahim-3d/orchestrator-supaconductor, 380 stars), Improve Codebase Architecture (ywwynm/EverythingDone, 144 stars) and Domain Modeling (brim-borium/spotify_sdk, 166 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design From Code?
ccplugins (a GitHub organization) maintains it in ccplugins/awesome-claude-code-plugins, which has 967 GitHub stars. The repository holds 68 skills in this directory. The repository was last updated on August 12, 2026.
Source: ccplugins/awesome-claude-code-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.