Where this fits

You're building a dashboard and need to show the client three different layout directions. Instead of generating static screenshots or hopping between tools, you ask your agent to prototype. The agent produces a single self-contained HTML file you can double-click and open in a browser. Inside, you flip between structurally distinct variants, tweak spacing, colors, and motion with live dials, and leave comments directly on elements. When you settle on one, you hit "Export to LLM" and paste the handoff block back to the agent—no ambiguity, no re-explaining.

Why agents benefit

• Generates multiple variants in one artifact: The agent can encode several layout approaches (e.g., sidebar vs. top-nav, card vs. table) in a single file, letting the user compare without context switching.
• Exposes design controls as live dials: Fonts, colors, spacing, shape, motion—each becomes a parameter the user can adjust in-browser, giving the agent feedback on exact values instead of vague "make it more modern."
• Supports viewport and theme testing: Users can check responsive behavior and light/dark mode directly, so the agent learns which breakpoints or themes need attention.
• Captures feedback via pinned comments: Users can annotate specific elements, turning visual critique into structured input the agent can act on.
• Provides a clean handoff format: The "Export to LLM" button produces a compact block that includes the chosen variant and all dial values, making follow-up iterations precise and efficient.

Practical scenarios

Landing page exploration

A startup founder wants three hero section concepts. The agent builds an HTML file with three hero variants, each with different headline placement, CTA style, and imagery treatment. The founder toggles between them, adjusts the color palette, and pins a comment on the CTA asking for a bolder hover effect. The handoff block lets the agent refine the chosen variant instantly.

Component library sanity check

You're designing a reusable button component. The agent generates a file with variants for primary, secondary, ghost, and disabled states, plus size and shape dials. You test them across viewport sizes and dark mode, then export the exact values for the design system documentation.

CLI/TUI layout review

For a terminal-based tool, the agent creates a mock TUI screen with different panel arrangements and keyboard navigation hints. You adjust the color scheme and spacing to match your brand, then hand off the final layout to the agent for implementation.

Add it to your agent workflow

Install the skill with:

npx skills add jparkerweb/ai-assist-skills --skill ai-assist-prototype

Then ask your agent: "Show me three options for a settings page layout using ai-assist-prototype." The agent will produce an HTML file with the Design Deck. After you tweak and export, paste the AI-ASSIST PROTOTYPE HANDOFF block back into the chat to continue iterating.

Compare before adopting

Before committing, compare this skill against alternatives like static mockup generators or Figma plugins. Check how actively the GitHub repo is maintained, whether the export format matches your agent's parsing abilities, and if the single-file approach fits your distribution needs. Also consider whether your typical UI vetting workflow benefits from the interactive dials or if simpler screenshots suffice.

Why it is worth tracking

With 88 stars and a focused author, this skill shows early community interest. The design-creative category is underserved in agent tooling, and the handoff block concept is a pragmatic pattern for closing the loop between user and agent. Track it if you frequently prototype UIs or want a lightweight, dependency-free way to let users 'feel' a design before code is written. For a deeper look, see the skill listing on OpenAgentSkill.