Menu

Individual skill

ds-design

Builds a frontend with a clear visual direction instead of the generic AI look. Use when you create a new page, app screen, or component, or restyle one that looks templated. Run as /ds-design.

skills/ds-design/SKILL.md

Read pinned source

Source commit d4f1ebe72e8314c3a0c6135bb82f623c650f7218

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Instructions only
Last checked
Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
220
Repository last updated
Oct 28, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

Build a UI that does not look like the default output for any similar prompt.

## Steps

1. Read the brief and the project. Find the subject, the audience, the one action you want the user to take, the stack, the existing brand, and the images you actually have. If the brief is vague, write down how you interpret it in one line and continue.
2. Write a direction note of five lines or fewer before you write code. Include the purpose, the audience, the tone, the one memorable thing, and the mode (persuade, operate, or read). Take it from the subject's own world, not the usual look of its category.
3. Define the tokens before you write components:
   - Type: a display font and a body font that are clearly different. Do not use a default font for display. Use a 5-7 step scale, body text of 16px or more, and lines under 80 characters.
   - Color: 4-6 named hex values. Use one dominant color for large areas and one sharp accent for actions only.
   - Use a 4px or 8px spacing base, one or two radius values, and one shadow style or none.
4. Ask: "Would I make this plan for any similar prompt?" Change each part where the answer is yes.
5. Lay out the page with intent. Choose a density: airy for persuading, compact for tools. Use asymmetry or scale contrast where it serves the content. Use real copy and plausible data. Do not use lorem ipsum.
6. Use motion only where it does a job. Use one orchestrated reveal, plus feedback on user actions.
7. Build every state: hover, focus-visible, disabled, empty, loading, error, and long content.