Rich UI
Skill
Give an AI agent a design workflow for typography, color, layout, tokens, and visual review.
Project links
How to use it
- Open the skill documentation and check its requirements.
- Copy the installation command for your preferred agent.
- Ask your agent to use the skill on a specific task and review the result.
Copy setup details
Use these instructions in your own environment. Copying text here does not run it.
Skill installation command
Example for Codex. The repository also documents Claude Code and custom destinations.
git clone https://github.com/fikrifirmanf/craft-skills.git cd craft-skills ./install.sh --skill rich-ui --target codex
Example request
Use rich-ui to design a resource directory. Propose typography, color roles, layout, and interaction states. Save exact tokens in design.md, implement the chosen direction, and inspect narrow and wide layouts when rendering is available.
Example results
Illustrative example
Example design outline Page: warm ivory #F6F5EF Text: deep ink #20251F Action: forest green #315642 Typography: one readable interface family and a compact technical face Next steps: define reusable tokens, build the page, then inspect its rendered layouts.
Illustrative response outline, not a recorded run.
Illustrative examples show a possible response format. They are not recorded runs or verified results. Actual responses will vary.