planetabhi/design-like

Overview

This skill helps install and use brand-specific design skills so your code and UI match the visual language of a chosen product brand (Apple, Linear, Stripe, Shopify, Notion, Figma, Spotify, Slack, Discord, IBM, Salesforce). It drives the design-like CLI to generate Agent Skills and IDE configuration so Claude and other agents have concrete tokens, components, and rules to follow. Use it when you want consistent, brand-aligned UI and agent guidance inside your project.

How this skill works

I ask which brand and IDE you want to target, confirm you can run npx in your project, and then guide you to run the design-like CLI (interactive or direct). The CLI writes IDE-specific files with design tokens, component patterns, and agent instructions into the correct config folder for Claude Code, Cursor, VS Code, or Antigravity. After installation, I show what was created, how to verify files, and how to use those tokens and rules when generating components or refactoring UI.

When to use it

• You want UI and code that follow a specific product brand’s visual language
• You can run CLI commands in the project root (npx available)
• You need agent-readable design tokens and IDE instructions for Claude or other coding agents
• You’re onboarding teammates and want consistent design guidance in version control

Best practices

• Confirm brand and IDE before installing to avoid writing files to the wrong location
• Run the CLI from your project root and use --target for monorepo apps (example: apps/web)
• Use --force only when you explicitly want to overwrite existing design-like files
• Commit generated files so collaborators and agents share the same design guidance
• After install, always reference tokens.json and the provided component patterns rather than inventing ad hoc styles

Example use cases

• Set up Apple-style tokens and component patterns in a new app by running: npx design-like apple
• Install Linear rules into Cursor with: npx design-like linear --ide cursor to generate .cursor/rules/ files
• Target VS Code specifically to get .vscode/instructions/ files and use those tokens in your React components
• Install into a subpackage with --target path/to/app in a monorepo to scope the guidance to one app
• Run npx design-like with no args to use the interactive prompt and preview brand options