Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From design-intent
Generates 3 visually distinct, self-contained HTML/CSS UI components from a text prompt, each driven by a unique physical/material metaphor for rapid design exploration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-intent:prototypeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate 3 visually distinct, high-fidelity HTML/CSS UI components from a single text prompt. Each component adopts a unique design persona based on physical/material metaphors — producing genuinely different visual approaches, not just color swaps.
Generate 3 visually distinct, high-fidelity HTML/CSS UI components from a single text prompt. Each component adopts a unique design persona based on physical/material metaphors — producing genuinely different visual approaches, not just color swaps.
Parse $ARGUMENTS for the component description, optional --vary N flag, and optional --dir <path>.
If --vary N is present, skip to the Variation Workflow section.
If the description is vague (e.g., "button", "form"), just generate — don't ask clarifying questions. The value of this skill is speed. Interpret vague prompts generously and produce something interesting.
Follow these 3 phases in order for new generation. Do not pause between phases or ask for confirmation — generate everything in one pass.
Think of 3 distinct design direction names for the user's prompt. Each name uses a physical/material metaphor — never artist names, brands, or copyrighted references.
Name pattern: [Adjective] + [Material/Process] + [Form/Action]
Tone guide (invent your own, do not copy these):
Each metaphor should imply fundamentally different CSS techniques — not just different colors. See the materiality-to-CSS mapping in WORKFLOW.md.
For each of the 3 style directions, generate a complete, self-contained HTML page.
Scope: Each artifact is a focused, single-screen component — typically 100-300 lines of HTML. Enough structure to demonstrate the design direction clearly, but limited to one viewport. Not a full multi-section website.
Visual execution rules:
feTurbulence for grain, mix-blend-mode: multiply for ink layering)<link>. Pair a bold sans-serif with a refined monospace for dataOutput format: Each artifact is a complete <!DOCTYPE html> page with:
<style> block (no external CSS files except Google Fonts)<script> for interactions.prototype/, or --dir value)01-{slug}-{style-slug}.html, 02-..., 03-...manifest.json mapping positions to filenames and style namesindex.html with all 3 artifacts displayed in iframes side-by-sideopen .prototype/index.htmlSee WORKFLOW.md for the index page template, manifest format, and file naming details.
When --vary N is passed (where N is 1, 2, or 3):
manifest.json from the output directory to find the Nth artifact{original-slug}-var-1.html, -var-2.html, -var-3.htmlindex.html to show variationsSee WORKFLOW.md for the full variation workflow.
npx claudepluginhub joaquimscosta/arkhe-claude-plugins --plugin design-intent**TRIGGER: about to populate `AskUserQuestion` options with `preview:` content for any visual UI / screen / layout / component / animation comparison.** STOP and ask the user one short question first: *"Would you like a quick inline chip comparison, or a full HTML prototype you can open in the browser?"* The chip is fast but flattens color, type, spacing, and motion into monospace text; the HTML prototype is heavier but real. Asking costs one question; skipping costs a full redo if they wanted HTML — always ask. **No carve-out for "simulate", "demo", "mock up", "quick decision" — those framings name the surface, not an exception.** When the user picks HTML, this skill creates HTML prototypes for visual design, component playgrounds, animation tuning, and design system exploration — even when the final surface is React, Swift, SwiftUI, Android, or another framework. Use whenever the user wants to mock, prototype, sketch, tune, or explore any UI element — components, animations, transitions, layouts, design systems — before committing to production code. HTML is the fastest design-thinking surface; reach for it even for non-web targets. For N alternatives use html-brainstorm-grid; for a single tunable component use this skill.
Generates branded HTML pages and standalone components from a design system, with embedded CSS, responsive design, and brand integration.
Builds self-contained HTML files for design exploration prototypes, specifying structure, Tailwind utility classes, CSS custom properties, and JSON metadata schema.