- Confirm context and brand
- Ask the user which brand they want to design like (for example: Apple, Airbnb, Linear, Shopify, Stripe, Notion, Figma, Spotify, Slack, Discord, IBM, Salesforce).
- Ask which IDE or agent environment they are using (for example: Claude Code, Cursor, VS Code, Antigravity).
- Verify they can run npx commands in their project directory.
- Guide the user to install the brand design skill
- Instruct the user to navigate to their project root in a terminal.
- Have them run the design-like CLI with the chosen brand:
```bash
npx design-like
```
- If they are unsure which brand to pick, suggest a few options based on their product style and audience.
- If they prefer an interactive flow, they can run:
```bash
npx design-like
```
and select a brand from the prompt.
- Explain supported IDEs and where files are generated
- Explain that design-like detects the IDE or agent environment and writes files into the appropriate folders:
- Claude Code: .claude/skills/
- Cursor: .cursor/rules/
- VS Code: .vscode/instructions/
- Antigravity: .agent/skills/
- Mention that the tool can also target a specific IDE explicitly using:
```bash
npx design-like --ide
```
- Help the user choose options and flags
- If the user wants to install into a specific directory (for example a monorepo app), suggest:
```bash
npx design-like --target path/to/app
```
- Recommend --force only when they explicitly want to overwrite any existing design-like files:
```bash
npx design-like --force
```
- If they want to preview what will be written without applying changes (if supported), suggest using --dry-run or the equivalent option documented in the repository.
- Verify installation and explain what was created
- After the user runs the command, ask them to confirm that new files were created under their IDE’s configuration directory.
- Explain that design-like typically creates:
- An Agent Skill file SKILL.md describing how to design like the chosen brand.
- A tokens.json (or similar) file containing design tokens (colors, typography, spacing, etc.).
- IDE-specific rule or instruction files (for example .mdc rules for Cursor or .instructions.md for VS Code).
- Encourage the user to keep these files under version control so teammates get the same design guidance.
- Use the brand design guidance in your coding session
- Once the brand design skill is installed, pay careful attention to its guidance:
- Follow the brand’s color, typography, spacing, and motion tokens whenever you propose UI.
- Use the recommended component patterns (buttons, cards, inputs, etc.).
- Respect the brand’s accessibility, contrast, and layout guidelines.
- When generating code, reference the specific brand tokens and examples provided by the installed skill instead of inventing your own design system.
- Suggest brand-consistent improvements proactively
- When reviewing or authoring components, suggest refactors that bring them closer to the installed brand’s patterns.
- Offer to convert existing generic components to use the brand’s tokens, border radii, shadows, and motion curves.
- If the user switches brands or wants to compare options, guide them to run the CLI again with a different brand and discuss trade-offs.
|