# Struq skill > Struq is a free, open-source design skill for Claude Code, Cursor, Codex and other AI coding tools: your AI settles the direction, type, colour and motion before it builds, so your site looks studio-made, not AI-made. Install: `npx @struq/skill@latest`, then `/struq ` in your agent. Free, open source (MIT), no account. Version 0.5.0. ## Pages - [Home](https://struq.app/): What the Struq skill is, the launch film, three directed sites and the install. - [Skill](https://struq.app/skill): How the Struq skill works: the four decisions, a run from brief to check, the commands. - [Showcase](https://struq.app/showcase): Sites directed the Struq way, each on its own page with the brief and how it was made: Ostrava Steel, Brume, Lowlight, Vuur, Halide One. - [Library](https://struq.app/library): Palettes, type pairings and design systems, each palette and pairing on its own page with its tokens. - [Photos](https://struq.app/photos): Art-directed CC0 photo packs, each with its own page, one colour and light treatment per pack. - [Icons](https://struq.app/icons): Struq Icons, the free icon set: two-tone icons with their own hover motion. - [MCP](https://struq.app/mcp): The Struq MCP: the block catalogue and the direction, live in your agent. - [Docs](https://struq.app/docs): Install, commands, connecting the MCP, its tools, example prompts, privacy and troubleshooting. - [Claude Code design skills compared](https://struq.app/guides/claude-code-design-skills): Five design skills for Claude Code side by side: what each fixes, how it works, its licence, its install and where it beats the Struq skill. - [Questions](https://struq.app/questions): What people ask about the Struq skill, answered plainly. - [About](https://struq.app/about): What Struq is and who makes it. - [Full text](https://struq.app/llms-full.txt): the skill, the showcase, the MCP and the docs as plain text ## How a build runs - You give it a brief. One line is enough. Who it is for, what it should feel like, anything you already have. - It plans, and stops once. The site is planned as one film: a motion language, one idea, one motif and a storyboard of scenes. Then a palette, a type pairing and a photo pack, all in one STRUQ.md that must pass its own check. You approve, and send a logo, photos or real numbers if you have them. - It builds from blocks. Each block is installed with everything it imports. Your agent writes the tokens, the fonts and your real copy around them. - It checks its own work. A check script runs until it passes. With a browser tool the agent also looks at the page at phone and desktop width and fixes what it sees. ## Commands - `/struq `: Plans the site into one STRUQ.md, stops once for your approval, builds it, then runs its own check and fixes what it finds. - `/struq redesign `: Keeps your brand, copy and components, and swaps in blocks where the page is weakest. - `/struq audit `: Changes nothing. Returns everything that makes the page look AI-made, each with its fix, and the three changes that pay off most. - `/struq direct `: Directed mode, for one continuous 3D experience across chapters. ## Showcase - [Ostrava Steel](https://struq.app/showcase/forge): A two-person forge that makes kitchen knives to order. Directed the Struq way, built by Claude Opus as one file. - [Brume](https://struq.app/showcase/brume): A nine-room hotel in a lighthouse keeper’s house on a foggy coast. Directed the Struq way, built by Claude Opus as one file. - [Lowlight](https://struq.app/showcase/lowlight): A film and brand studio on the Maashaven in Rotterdam. Directed the Struq way, built by Claude Opus 5.5 as one file. - [Vuur](https://struq.app/showcase/vuur): A restaurant with a wood-fired oven and a wine bar by the water. Built with the Struq skill by Claude Opus 5.5 from this brief. - [Halide One](https://struq.app/showcase/halide): The launch of a desk lamp you tune from cold to warm. Directed the Struq way, built by Claude Opus as one file. ## Struq Icons A free, MIT-licensed set of 182 two-tone icons, 118 with their own hover motion. Install: `npm install @struq/icons`. ## Struq MCP Endpoint: https://struq.app/api/mcp. Seven tools, all free with a free account: four for the catalogue, three that read the library. - `struq_richting`: Returns the direction: one palette, one type pairing and one photo pack, as the token block the blocks read, with the font links and the photos. - `struq_blokken`: Lists the blocks, by kind or by words: preloaders, page transitions, headers, heroes, showpieces, sections, WebGL backgrounds and footers. - `struq_blok`: Returns one block as real files, with its packages, its props and a usage example. Your agent writes the files exactly as returned. - `struq_controle`: Returns the check your agent runs locally against its own files before it calls the work done. - `struq_list_assets`: Pages through the library: palettes, typography, design systems, sections and imagery. - `struq_search_assets`: Searches the library by mood, sector or name. - `struq_get_asset`: Fetches one asset with its prompt and its exact colours and fonts. ## Questions ### What is the Struq skill? The Struq skill is a free, open-source design skill for Claude Code, Cursor, Codex and other AI coding tools. Your agent settles a direction, two typefaces, a colour system and the motion before it writes any markup, stops once for your approval, then builds the site from 44 admitted blocks and checks its own work. ### What does it cost? Nothing. The skill is free and open source under the MIT licence, and it needs no account. You pay only for your own AI tool, if that has a subscription. ### Which AI tools does it work with? Claude Code, Cursor, Codex and OpenCode are the tested ones. The installer finds the AI tools on your machine and installs the skill into each of them, including Gemini CLI, GitHub Copilot and Windsurf. In Claude Code it also installs as a plugin. ### How do I install it? Copy the install prompt for your tool and paste it into your agent. It runs npx @struq/skill@latest for you. In a terminal, run the same command yourself. Run it again to update, and add the word remove to take it out. ### Do I need to know how to code? No, but you need a tool that writes files and code itself, such as Claude Code, Cursor or Codex. You describe the site and approve the plan. The skill does not run in a chat window or in a site builder. ### Does it change my existing site? Only when you ask. With /struq redesign your agent keeps your brand, copy and components and proposes where blocks replace the weakest parts. With /struq audit it changes nothing and returns a list of what makes the page look AI-made, each with its fix. ### Can I use my own photos, logo and copy? Yes. The one stop in the build is the moment to send them. For every slot your own photos do not fill, the skill picks from Struq’s CC0 image packs. It never invents testimonials, clients or numbers. ### What stack does it build on? Next.js App Router with Tailwind v4, and Vite by hand. Motion runs on GSAP, and every plugin used is free on npm. Icons are Struq Icons by default. ### What does it fetch and send? The blocks and the direction ship inside the skill, so nothing is fetched to install them. The image script downloads the chosen photos from Struq’s photo library into your project. The installer sends nothing. If you connect the Struq MCP, your agent calls its tools with your brief, and nothing else leaves your machine. ### How is it different from other design skills? Most design skills work against the AI look with taste rules, an audit afterwards or a reference library. The Struq skill plans a site that makes an impression, and ships the hard parts as files: preloaders, page transitions, pinned showpieces and WebGL backgrounds. Avoiding the AI look is the floor it starts from. ### What are Struq Icons? Struq Icons is a free, MIT-licensed set of 182 icons, and the set the skill uses by default. Each icon has two tones, and 118 of them make one small move on hover that says what they do. They are drawn at the size and weight of Lucide, so they drop in where Lucide was. Install with npm install @struq/icons. ### Is the Struq MCP required? No. The skill works from its own copy of the blocks and the direction. With the Struq MCP connected, the same four jobs come from the server, so your agent always has the current catalogue. The MCP needs a free account, because the client connects as you. ### Where does it still fall short? Craft under pressure. An ambitious page with pinned scenes and reveals has more that can break than a plain one, and a reveal can still come out empty on a first build. The skill’s own check catches most of it, and each release works on the rest. It is at version 0.5.0. ## Links - Source: https://github.com/struqapp/struq-design - npm: https://www.npmjs.com/package/@struq/skill - MCP endpoint: https://struq.app/api/mcp - Docs: https://struq.app/docs - Connect the MCP: https://struq.app/docs/connect