Create context-aware HTML design artifacts for interactive prototyping workflows.
npx skills add https://github.com/twolights/meowrc --skill design-artifact
Please help me install this Agent Skill. Skill: design-artifact Source: https://github.com/twolights/meowrc/tree/main/claude-code/skills/design-artifact Command: npx skills add https://github.com/twolights/meowrc --skill design-artifact
This Skill helps create high-fidelity HTML design artifacts by guiding users away from generic layouts and toward context-aware visual explorations, prototypes, decks, posters, and animations.
Use the design-artifact skill to create three varied HTML prototype concepts for my product using the provided design context.
High-intent search queries and answers about installing and using this skill.
Interactive HTML prototypes are created by establishing design context and rationale, then generating multiple visual and layout variations as responsive HTML artifacts for browser-based verification. This approach replaces generic layouts with context-aware, clickable design canvases.
Slide deck design variations can be generated as HTML artifacts by producing multiple visual directions across copy, interactions, and layouts for comparison. This allows you to compare different high-fidelity slide deck concepts directly in the browser before finalizing a direction.
Building clickable prototypes without generic layouts requires structured design reasoning that defines context and assumptions before implementation. This process yields polished, context-aware HTML artifacts that support interactive states and responsive visual output for design verification.
Designing HTML animations and posters with multiple variations involves applying structured design reasoning to produce several visual directions. You generate responsive HTML artifacts for each concept, enabling direct browser-based verification of interactive states and visual output.
Providing design context is required before generating HTML design artifacts. The workflow establishes design context, assumptions, and rationale upfront to guide the creation of multi-variation visual explorations, preventing generic layouts and ensuring targeted, high-fidelity outputs.
Visual exploration requires browser-based verification to validate the interactive states and responsive output of generated HTML artifacts. Verifying in the browser ensures the clickable prototypes, animations, and slide decks function correctly and match the intended design reasoning.
nsuberiScan project repositories and write design context to .impeccable.md.
liangmiQwQGenerate hi-fi HTML designs and prototypes from user briefs.
BasitShafiqAnalyzes component constraints and generates a design brief for subagent.
Sir-chawakornTranslate Figma designs into React and Tailwind CSS components with visual-diff verification.
