inspiration-skills

# Inspiration skills Agent skills that make your coding agent design from real references instead of defaults. They run on the hosted MCP server of [Inspiration by VASA.Works](https://inspiration.vasa.works), a searchable, described and tagged library of design work: website sections and full-site styles, UI and product screens, slide decks, branding and brand guidelines, fonts, color palettes, editorial and print, illustration, motion, photography, mockups, data visualization, OG images and emails. ## The skills | Skill | What it does | |---|---| | `inspiration-art-direction` | The flagship. Brief, then research (mood searches plus one search per key page section, fonts, palettes, brand styles), view the actual images, keep 5 to 8, write a specimen sheet (what each reference gives, what it leaves, what it becomes), derive a direction (type, palette, grid, sections, motion, one signature detail), build, then screenshot the build in a real browser and fix it against the references. | | `inspiration-brand-kit` | A starter brand kit from a hex, a name or a few adjectives: color ramps and roles with checked contrast, a font pairing with rendered specimens, on-brand references, and tokens as CSS variables, Tailwind and JSON. | | `inspiration-references` | Find, show, compare and critique references for any page, section, deck or brand question, find more like one you like, and save sets to your Inspiration boards. | The art-direction skill ships a small real-browser inspector (`scripts/inspect.mjs`) that captures full-page screenshots at desktop and mobile widths and reports fonts actually rendered, colors, heading sizes, line length, horizontal overflow, missing alt text and low-contrast text. ## Requirements - **All skills:** an MCP-capable agent connected to the Inspiration MCP server (the plugin does this for you; other clients below). A free account works: 50 metered tool calls per month, and each skill keeps a run to about 5 to 12 of them. - **Image fallback** (only when the server cannot return images): `curl`, plus ImageMagick (`magick`, or `convert` on ImageMagick 6) to convert and crop. Without ImageMagick the skills use `sips` on macOS or open the downloaded webp directly. - **Inspector** (art-direction only, optional): Node 22+, `playwright-core` and a Chrome or Chromium. `npx -y -p playwright-core@1.63.0 node skills/inspiration-art-direction/scripts/inspect.mjs ./index.html` runs it without adding a dependency to your project, but npx downloads `playwright-core` into its cache on the first run. For the browser it uses `INSPECT_CHROME=/path/to/chrome`, your installed Chrome, or a Playwright Chromium; with none of those, run `npx -y playwright@1.63.0 install chromium` once. Output goes to `.inspiration-out/`, which the skills add to your `.gitignore` if the project has one. Agents with their own browser or screenshot tool can skip it. ## Install ### Claude Code (plugin, recommended) The plugin installs all three skills and registers the MCP server for you. ``` /plugin marketplace add huseyingayiran/inspiration-skills /plugin install inspiration@vasa-works ``` Then run `/mcp`, pick `plugin:inspiration:inspiration` (or `inspiration` if you added it by hand), and sign in in the browser. Free and Pro accounts both work. ### Cursor, Codex and other agents Install the skills: ``` npx skills add huseyingayiran/inspiration-skills ``` Then connect the MCP server for your client (below). You can also install a single skill; each one is self-contained. ## Connect the MCP server Server URL: `https://mcp.vasa.works/mcp` (streamable HTTP). Clients with OAuth sign you in through the browser. Key-based clients use the API key from your [account page](https://inspiration.vasa.works/account). **Claude Code** (only if you skipped the plugin): ``` claude mcp add --transport http inspiration https://mcp.vasa.works/mcp ``` Then `/mcp`, pick `inspiration`, sign in. **Cursor** (`~/.cursor/mcp.json` or `.cursor/mcp.json`): ```json { "mcpServers": { "inspiration": { "url": "https://mcp.vasa.works/mcp", "headers": { "Authorization": "Bearer YOUR_API_KEY" } } } } ``` **Codex** (`~/.codex/config.toml`): ```toml [mcp_servers.inspiration] url = "https://mcp.vasa.works/mcp" bearer_token_env_var = "INSPIRATION_API_KEY" ``` Set `INSPIRATION_API_KEY` to your key, or leave the line out and run `codex mcp login inspiration` for OAuth. **Claude.ai and Claude Desktop:** Settings, Connectors, add a custom connector with `https://mcp.vasa.works/mcp`, approve the sign-in. **ChatGPT:** Settings, Apps and Connectors, create a connector with `https://mcp.vasa.works/mcp` and OAuth, sign in, enable it in a chat. ## Free and Pro Connecting is free. A free account includes 50 metered tool calls per UTC month; browsing the vocabulary (`list_facets`) does not count. A full art-direction run is budgeted at about 12 calls. Pro is unlimited. See [pricing](https://inspiration.vasa.works/pricing). When the free calls run out, the skills say so and finish with what they already have. ## Example prompts - "Design a landing page for our open-source observability tool. Make it feel editorial, not like a template." - "Art direct the homepage of my ceramics studio, then build it in this Next.js app." - "This pricing page looks generic. Find references and redo it." - "Make a brand kit from #1F6F5C for a calm fintech app, with a font pairing." - "Show me dark SaaS heroes with oversized serif type and compare the three best." - "Find more like this one and save the set to a board called Q3 relaunch." ## Never copy The skills take principles, not pixels. Every reference the art-direction skill keeps is written up with what it borrows and what it deliberately leaves behind. They never lift a layout wholesale, and never reuse a reference's copy, images, logos or licensed typefaces. References are only described from images the agent actually viewed. ## Files ``` .claude-plugin/plugin.json plugin manifest .claude-plugin/marketplace.json marketplace "vasa-works" listing the plugin .mcp.json registers the inspiration MCP server skills/inspiration-art-direction/ SKILL.md, references/, scripts/inspect.mjs skills/inspiration-brand-kit/ SKILL.md, references/ skills/inspiration-references/ SKILL.md, references/ evals/ claude plugin eval suite (see evals/README.md) CHANGELOG.md release notes; every SKILL.md carries the same metadata.version ``` `references/setup.md` and `references/library-rules.md` are identical in every skill on purpose, so each skill also works when installed on its own. ## License MIT, see [LICENSE](LICENSE). Copyright 2026 VASA Works ltd. The skills are open source; the design library and MCP server are a service of [Inspiration by VASA.Works](https://inspiration.vasa.works).