Define UI directions and generate ASCII wireframes with Change Specs for /arc:implement workflows.
npx skills add https://github.com/howells/arc --skill design-howells
Please help me install this Agent Skill. Skill: design Source: https://github.com/howells/arc/tree/main/skills/design Command: npx skills add https://github.com/howells/arc --skill design-howells
This skill helps teams define distinctive UI directions and translate them into actionable design documentation.
Use the design skill to begin a new UI direction, load references, and generate a Change Spec for the target component.
High-intent search queries and answers about installing and using this skill.
To translate a UI direction into actionable design documentation, define distinctive aesthetic choices for typography, color, spacing, layout, and motion, then output a structured Change Spec. This spec captures phase-aligned decisions and ASCII wireframes ready for implementation workflows.
The best way to create version-controllable wireframes for UI redesigns is generating lightweight ASCII wireframes. These text-based structural layouts communicate component arrangement clearly without binary image files, ensuring seamless version tracking and team collaboration.
To define typography and color specifications when extending an existing UI, apply phase-aligned design decisions across Phases 4-6. This process delivers explicit aesthetic directions, ensuring new interface elements match the established branding and visual language.
Yes, you can generate a design change spec for a phase-guided UI workflow. The process guides ideation through Phase 4-6, delivering concrete layout, spacing, and motion decisions that produce a consumable design document for implementation.
Yes, the generated design document works directly with the /arc:implement workflow. The output is a concrete Change Spec containing UI patterns, ASCII wireframes, and layout decisions structured specifically for consumption by the implementation phase.
You need ASCII wireframes for UI specification when communicating structural layouts before coding begins. They provide a lightweight, version-controllable format to define component arrangement and page structure, ensuring design alignment prior to technical implementation.
porcupine-mdImplement frontend interfaces with strict aesthetic guidelines for typography, color, layout, and motion.
constellosGenerate mobile-first ASCII wireframes and WIREFRAME.md files for UI planning.
tamnguyentommy-rgbConvert reference images into pixel-perfect HTML/CSS/React frontend implementations.
Sir-chawakornTranslate Figma designs into React and Tailwind CSS components with visual-diff verification.
