Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

design-from-code — design mockups grounded in real source · ccplugins | DecimalAI

design mediaby ccplugins

design-from-code — design mockups grounded in real source

ccplugins/design-from-code

Source ccplugins/awesome-claude-code-plugins ↗License Apache-2.0

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) "설계해줘", "시안 만들어줘", "이 기능 어떻게 보여줄지",

SkillScore41Maintained

Automatic

Frontend / UI pack

Last verified 9/24/2026

What it changes

Passed 7 of 17 test cases with the skill, and 5 of 17 without it.

Without skill27%

With skill41%

Checks it passed that the model alone missed

marks untouched UI sections with 🟦keep tags
marks newly added UI elements with 🟩new tags
avoids loading external JavaScript charting libraries

and 6 more in the full report

6 fixed3 passed either way10 still failing3 broke

Pass-rate lift: +14 pp
Tokens: +12%
Agent turns: 0%
Response time: -38%

Model gemini-3.6-flashMeasured 9/24/2026v19 of 22 cases passed with skill · 17 comparable

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/ccplugins-design-from-code/SKILL.md https://app.decimal.ai/s/ccplugins-design-from-code/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add ccplugins-design-from-code, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/ccplugins-design-from-code/ and pins it in .decimal/skills.lock

decimalai skills add ccplugins-design-from-code

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/ccplugins-design-from-code/SKILL.md https://app.decimal.ai/s/ccplugins-design-from-code/SKILL.md

Raw file: /s/ccplugins-design-from-code/SKILL.md ↗ · machine-readable summary at /s/ccplugins-design-from-code.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 6

Prompt

We need to display a line chart of daily active users inside our HTML mockup for `AnalyticsOverview.tsx`. Which implementation method should be used for rendering the chart visual?

What was checked, without and with the skill
Checked	Without skill	With skill
renders chart elements using inline SVG markup	Passed	Passed
avoids loading external JavaScript charting libraries	Missed	Passed

case-12 · gemini-3.6-flash · 9/24/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md57 lines5 files

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.

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

Track record

Benchmark

7 / 17

test cases passed, vs 5 / 17 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 8/17/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

ccplugins / awesome-claude-code-plugins

plugins/design-from-code/skills/design-from-code/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/17/2026Version v1Bundled 4 files

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

design-from-code — design mockups grounded in real source

When to use

When NOT to use

Core principles (these override every other decision)

The 8-step workflow

Track record

Benchmark

Adoption

SkillSafety

Source

Related skills