Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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.
npx claudepluginhub joaquimscosta/arkhe-claude-plugins --plugin design-intentHow 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.
**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.
Builds self-contained HTML files for design exploration prototypes, specifying structure, Tailwind utility classes, CSS custom properties, and JSON metadata schema.
Generates standalone HTML components and composes them into branded full pages from design systems, with embedded CSS, responsive design, and brand integration. Invoke via /html-page or /html-page-quick.
Share bugs, ideas, or general feedback.
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.