CODEHANCEdocs
← All skills & agents

design

Takes a blueprint and produces a visual design and mockup of the required screens. Use after the blueprint skill has produced a screen inventory.

Install order matters: install blueprint first — this builds on its output.

Install

Install globally

Recommended

Available in every directory and every project — install once, use for everything you build.

$ npx skills add https://docs.codehance.com --skill design -g --agent claude-code

Just this project

Drop the -g to install into the current project only.

$ npx skills add https://docs.codehance.com --skill design --agent claude-code

Run the command from a terminal. Omitting --agent makes the CLI auto-detect the coding tools installed on your machine.

Design

Placeholder skill. This is dummy content used to test the Codehance docs and install pipeline end to end. The real skill instructions will replace this body.

What this skill does

Takes the screen inventory produced by the blueprint skill and turns it into a visual design — mockups of every screen, consistent with a single design language.

When to use it

Use this after blueprint has produced a screen inventory, and before bootstrap scaffolds the project.

Instructions

  1. Read the blueprint output for the current project.
  2. Produce a mockup for each screen. *(Placeholder — real steps to follow.)*
  3. Present the design for review. *(Placeholder — real steps to follow.)*