Create polished interface designs using existing components and brand references. The workflow clarifies assumptions, shares early drafts, explores multiple variations, and checks the results so users can compare options and refine their preferred direction.
The design process for high-fidelity, polished work — the system prompt tells Claude to invoke it before starting any design
Run score Not tested
See how to installCreate screen designs close to their finished form, using existing UI components and brand materials as references. The process starts by clarifying goals and requirements. It then records and shares assumptions, reference information, and reasons for design decisions early. From there, it presents variations in layout, color, typography, and interaction, refining them through review and revision.
Use it when a new screen needs to match an existing service, or when you want to compare several design directions before choosing one. When options are presented together, each receives a stable reference number and earlier versions remain available. You can point to elements you like and use them to guide the next revision.
The skill relies on design references such as existing code, UI kits, screenshots, and Figma links. It asks you to provide these materials if it cannot find them. Some requirements for displaying multiple options assume the host provides a canvas with pan and zoom.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).
Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 24, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
Create a high-fidelity, polished design.
Follow this general design process (use the todo list to remember): (1) ask questions, (2) find existing UI kits and collect design context — copy ALL relevant components and read ALL relevant examples; ask the user if you can't find them, (3) start your file with assumptions + context + design reasoning (as if you are a junior designer and the user is your manager), with placeholders for the designs, and show it to the user early, (4) build out the designs and show the user again ASAP; append some next steps, (5) use your tools to check, verify and iterate on the design.
Good hi-fi designs do not start from scratch — they are rooted in existing design context. Ask the user to Import their codebase, or find a suitable UI kit / design resources, or ask for screenshots of existing UI. You MUST spend time trying to acquire design context, including components. If you cannot find them, ask the user for them. In the Import menu, they can link a local codebase, provide screenshots or Figma links; they can also link another project. Mocking a full product from scratch is a LAST RESORT and will lead to poor design. If stuck, try listing design assets and ls'ing design system files — be proactive! Some designs may need multiple design systems — get them all. Use the starter components (device frames and the like) to get high-quality scaffolding for free.
When showing multiple design options on one page, decide between (a) a single full-size responsive prototype with a tweaks panel, or (b) a vertical stack of anchored option cards. Choose based on how design-y vs prototype-y the ask is, how many options there are, and how big each is. For (b):
Present multiple design options as a vertical stack of turns — each turn of options is its own <section>, newest turn at the top, and every option gets a stable {turn}{letter} id (1a, 1b, 2a…) that the user references back in chat and you cross-link between turns. Always include <meta name="design_doc_mode" content="canvas"> in <helmet> — the host provides pan/zoom, so the user can freely zoom out on designs wider than the viewport.
How to write it — put one <style> block in <helmet>, then one <section class="dv-turn"> per turn as a direct child of the root (right after </helmet>, no wrapper). When the user asks for another round, insert the new section ABOVE the existing ones so the latest work sits at the top; never reorder, renumber, or delete earlier turns.
<helmet data-dc-atomics><meta name="design_doc_mode" content="canvas"><style>
body{margin:0;background:#f0eee9;font-family:system-ui,sans-serif}
.dv-turn{padding:40px 44px 32px;border-bottom:1px solid rgba(0,0,0,.08);scroll-margin-top:16px}
.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 20px}
.dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#1a1a1a;color:#fff;border-radius:4px;text-decoration:none}
.dv-tname{font:600 13px/1.2 system-ui,sans-serif;color:#1a1a1a}
.dv-opts{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.dv-opt{flex:none;display:flex;flex-direction:column;gap:9px;scroll-margin-top:16px}
.dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:rgba(0,0,0,.08);color:#1a1a1a;border-radius:5px;text-decoration:none}
.dv-olabel{display:flex;align-items:baseline;gap:8px;font:400 11px/1.3 system-ui,sans-serif;color:rgba(0,0,0,.55)}
.dv-card{max-width:100%;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden}
.dv-opt:target .dv-oid{background:#2a78d6;color:#fff}
.dv-next{margin:22px 0 0;font:12px/1.5 system-ui,sans-serif;color:rgba(0,0,0,.5)}
</style></helmet>
<section class="dv-turn" id="t2">
<div class="dv-thd"><a class="dv-tid" href="#t2">2</a><span class="dv-tname">Riffs on <a class="dv-oid" href="#1b">1b</a></span></div>
<div class="dv-opts">
<div class="dv-opt" id="2a"><div class="dv-olabel"><a class="dv-oid" href="#2a">2a</a>Tighter spacing</div><div class="dv-card" style="width:360px">…design…</div></div>
<div class="dv-opt" id="2b">…</div>
</div>
<p class="dv-next">Try next: "more like <a class="dv-oid" href="#2a">2a</a> but with the serif from <a class="dv-oid" href="#1c">1c</a>" · "make <a class="dv-oid" href="#2b">2b</a> full-bleed" · "new directions"</p>
</section>
<section class="dv-turn" id="t1">…turn 1, unchanged…</section>
Rules: turn section ids are t1, t2, t3…; option ids are 1a, 1b, 2a… and go on the option's outermost element (.dv-opt), never on the badge — so #1b scrolls the whole option into view. Ids are stable forever, never reused or renumbered. Options within a turn sit side-by-side in a wrapping row; don't hand-roll your own pan/zoom — the host canvas provides it. Every option-id reference in the file — turn heading, option label, .dv-next line, any prose — is an <a class="dv-oid" href="#1b">1b</a> link, never a bare 1b; in your chat replies, just write 1b. End each turn with a one-line .dv-next of 2–3 plain-English follow-ups the user could paste into chat. Size each .dv-card to its content (explicit width is fine); don't use height:100%.
When designing, asking many good questions is ESSENTIAL.
Give options: try to give 3+ variations across several dimensions. Mix by-the-book designs that match existing patterns with new and novel interactions, including interesting layouts, metaphors, and visual styles. Have some options that use color or advanced CSS; some with iconography and some without. Start your variations basic and get more advanced and creative as you go! Try remixing the brand assets and visual DNA in interesting ways — play with scale, fills, texture, visual rhythm, layering, novel layouts, type treatments. The goal is not the perfect option; it's exploring atomic variations the user can mix and match.
CSS, HTML, JS and SVG are amazing. Users often don't know what they can do. Surprise the user.
If you do not have an icon, asset or component, draw a placeholder: in hi-fi design, a placeholder is better than a bad attempt at the real thing.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create a 3D object with three.js, inspect it from every angle in an interactive viewer, and download it as OBJ + MTL or GLB for use in other 3D applications.
Maintain a private task list with deadlines, next steps, waiting parties, and blockers. Update progress and dependencies, merge duplicate items, and archive closed tasks so ongoing commitments stay clear and easy to follow.
Coordinate a task from a verifiable goal through completion. Handle work directly or split independent tasks across separate agent sessions, track progress, verify results, and arrange pull request merging when included in the goal.
Create animated HTML pages with smooth scene transitions and playback controls. An editable timeline lets users adjust scene lengths and speeds, with fixed landscape or portrait layouts prepared for video export.
Review synced Apple Health records, including steps, heart rate, sleep, and workouts. Retrieve daily summaries or detailed samples for a chosen period, and check sync status and missing data before interpreting the results.
Create and edit Word documents and templates, reorganize text, replace images, and work with tracked changes or comments. Apply proper headings and lists, then render every page to check its appearance before delivery.