# Struq

> 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.

Studio-grade sites from the AI you already use. Install: `npx @struq/skill@latest`. Free, open source (MIT), no account. Version 0.5.0.

## Pages
- https://struq.app/: What the Struq skill is, the launch film, three directed sites and the install.
- https://struq.app/skill: How the Struq skill works: the four decisions, a run from brief to check, the commands.
- 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.
- https://struq.app/library: Palettes, type pairings and design systems, each palette and pairing on its own page with its tokens.
- https://struq.app/photos: Art-directed CC0 photo packs, each with its own page, one colour and light treatment per pack.
- https://struq.app/icons: Struq Icons, the free icon set: two-tone icons with their own hover motion.
- https://struq.app/mcp: The Struq MCP: the block catalogue and the direction, live in your agent.
- https://struq.app/docs: Install, commands, connecting the MCP, its tools, example prompts, privacy and troubleshooting.
- 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.
- https://struq.app/questions: What people ask about the Struq skill, answered plainly.
- https://struq.app/about: What Struq is and who makes it.

## The skill (https://struq.app/skill)

### The four decisions it settles before the first line of markup
- Direction. One idea the whole site is about. Your agent writes it into a single plan file, STRUQ.md, and stops once to show you. You approve it, or you change it.
- Type. Two typefaces from Struq’s pairings, chosen by temperament and loaded at their real weights. The headline carries the page, the way it does in a studio.
- Colour. A palette with roles: a ladder of surfaces, an ink, one accent and the ink that sits on it. It lands as one token block that every part of the site reads.
- Motion. Preloaders, page transitions, pinned showpieces and WebGL backgrounds arrive as real files, each judged against an award-tier reference. The blocks carry the timing, so nothing is left to a guessed easing curve.

### 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.

### The commands
- `/struq <brief>`: 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 <path>`: Keeps your brand, copy and components, and swaps in blocks where the page is weakest.
- `/struq audit <path-or-url>`: 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 <brief>`: Directed mode, for one continuous 3D experience across chapters.

### What ships in the skill
- Blocks. 44 admitted blocks: 4 preloaders, 3 page transitions, 2 headers, 5 heroes, 3 WebGL backgrounds, 9 showpieces, a scene transition, 15 sections and 2 footers, with the kit they stand on.
- Direction. Struq’s palettes and type pairings, written as the one token block the blocks read. It works offline and needs no account.
- Photos. Art-directed CC0 packs from the Struq image library, picked by the brief and filtered to what fits the client.
- Craft. The rules for the code between the blocks: clips from numbers, whole pixels, decode before show, scroll-tied and reversing motion, and type on the calm side of a photo.
- Check. A script that looks for the AI look (eyebrows, pills, gradients, glow, monospace, Inter, default purple, numbered steps, icon grids, dashes) and for what a page owes its blocks. It checks the plan too, before a block goes in.
- Icons. Struq Icons by default: 182 two-tone icons, most with their own hover motion.

### Install, per tool
- Claude Code: Install the free Struq skill with this command: npx @struq/skill@latest Then use /struq <brief> whenever I ask you for a website. (Paste it into Claude Code. It runs the install, then /struq is ready.)
- Cursor: Install the free Struq skill with this command: npx @struq/skill@latest Then use the struq skill whenever I ask you for a website. (Paste it into Cursor. Afterwards, ask for the struq skill by name.)
- Codex: Install the free Struq skill with this command: npx @struq/skill@latest Then use $struq <brief> whenever I ask you for a website. (Paste it into Codex. It runs the install, then $struq is ready.)
- Terminal: npx @struq/skill@latest (Finds the AI tools on your machine and installs the skill into each. Node 18 or newer.)

## The showcase (https://struq.app/showcase)

### Ostrava Steel (https://struq.app/showcase/forge)
Ostrava Steel is the website of a two-person forge in Ostrava that makes kitchen knives to order, and that does not exist. It was directed the Struq way, with the idea, the type, the colour and the motion settled before any markup, and then written by Claude Opus as one file. Nothing on it fades: everything arrives in slices and hard cuts. It runs below as it was built.
Directed the Struq way, built by Claude Opus as one file.
Brief: A two-person forge in Ostrava that makes kitchen knives to order. One goal: a name on the order list.
How it moves: Hard cuts and short masks. Nothing fades, everything arrives in slices.
- Motion: Hard cuts and short masks. Nothing fades; everything arrives in slices, the way steel is cut.
- Type: Big Shoulders Display, heavy and condensed, over Newsreader for the reading text.
- Colour: Soot and bone: near-black grounds, a warm off-white and one forge orange for the call to action.
- Build: One HTML file, written by Claude Opus, with photographs from Struq’s image library.

### Brume (https://struq.app/showcase/brume)
Brume is the website of a nine-room hotel in the old lighthouse keeper’s house on Skerra Point, a foggy northern coast that does not exist. It was directed the Struq way and then written by Claude Opus as one file: slow and photographic, with prints that grow into place and holds as long as the weather. It runs below as it was built.
Directed the Struq way, built by Claude Opus as one file.
Brief: A nine-room hotel in a lighthouse keeper’s house on a foggy northern coast. One goal: a request to stay.
How it moves: Slow and photographic. Prints grow into place, clips open from an edge, the holds are long.
- Motion: Slow and photographic. Prints grow into place, clips open from an edge and the holds are long.
- Type: Instrument Serif for the headlines over Urbanist, with one italic word in rust.
- Colour: Fog, mist, sea and slate: a ladder of cool greys under one near-black ink.
- Centerpiece: The light: the lighthouse scene a little past the middle, which the quieter scenes build toward.
- Build: One HTML file, written by Claude Opus, with photographs from Struq’s image library.

### Lowlight (https://struq.app/showcase/lowlight)
Lowlight is the website of a film and brand studio on the Maashaven in Rotterdam that does not exist. Claude Opus 5.5 built it as one file from a written direction: a dark projection room, one amber light, one grade over every photograph and one way of moving. Much of what the Struq skill knows about craft was learned from it, and it runs below as it was built.
Directed the Struq way, built by Claude Opus 5.5 as one file.
Brief: The site of a film and brand studio on the Maashaven in Rotterdam, as one file, directed before a line of it was written.
How it moves: A dark projection room and one amber light. Gates part, and a reel advances one frame per scroll.
- Idea: A dark projection room with one amber light in it.
- Grade: One grade over every photograph, so the page reads as one film and not as a collection of stills.
- Motion: One way of moving: gates that part on the middle line, a reel that advances one frame per scroll.
- Build: One HTML file, written by Claude Opus 5.5, with the photographs generated for it on a local machine.

### Vuur (https://struq.app/showcase/vuur)
Vuur is the website of a restaurant with a wood-fired oven and a wine bar by the water that does not exist. Claude Opus 5.5 built it with the Struq skill as the skill’s showpiece demo: the agent wrote the plan, took its palette, type and photographs from Struq’s canon, and played every showpiece the skill ships on one page. It runs below as it was built.
Built with the Struq skill by Claude Opus 5.5 from this brief.
Brief: A restaurant with a wood-fired oven and a wine bar by the water. A demo: play every showpiece once.
How it moves: Every showpiece the skill ships, once, opened by the oven photograph edge to edge.
- Idea: Everything starts at the fire. The motif is the open oven.
- Type: Fraunces over Urbanist, the serif-editorial pairing, with the display face at its lightest weight.
- Colour: Marrow bone and blood orange: a warm, theatrical bone ground with one red-orange accent.
- Photos: The proof pack from Struq’s image library, with its bakery photographs left out because the brief names no bakery.
- Arc: The opener, the image to full bleed, the manifesto, the panel wipe, the scrub connector, the project stack, the fill rows and the wordmark finale.

### Halide One (https://struq.app/showcase/halide)
Halide One is the launch page of a desk lamp you tune from cold to warm light, one glass rod on one anodised arm, which does not exist. It was directed the Struq way and then written by Claude Opus as one file, around a glass rod rendered live in WebGL that you can press and hold to warm. It runs below as it was built.
Directed the Struq way, built by Claude Opus as one file.
Brief: The launch of a desk lamp you tune from cold to warm: one glass rod, one anodised arm, a numbered edition. One goal: a reservation.
How it moves: Curtains and one line of light, around a glass rod rendered in real time.
- Motion: Curtains and one line of light, around a glass rod rendered in real time.
- Type: Bodoni Moda, high in contrast like the rod, over Urbanist.
- Colour: Near-black and a cool paper white, with one lime kept for the light.
- Build: One HTML file with a WebGL rod, written by Claude Opus.

## Struq Icons (https://struq.app/icons)

A free, MIT-licensed set of 182 two-tone icons, 118 with their own hover motion, drawn at the size and weight of Lucide. Install: `npm install @struq/icons`.

## The Struq MCP (https://struq.app/mcp)

Endpoint: https://struq.app/api/mcp. All seven tools are free and need a free account, because the client connects as you.
- `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.
Library tools, which read the Struq library and change nothing:
- `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.

## Docs (https://struq.app/docs)

### Struq docs. (https://struq.app/docs)
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
Run this once in a terminal. It finds the AI tools on your machine and installs the skill into each.
`npx @struq/skill@latest`
Then give your agent a brief. In Claude Code:
`/struq a portfolio for an architecture studio in Rotterdam, dark, calm, lots of photography`
It plans the site, stops once to show you the plan, and builds only after you say yes. Free, open source, no account.

#### Where to go next
Each page answers one thing. Start with the one you need.
InstallEvery tool, one tool or one project, updating and removing.CommandsBuild, redesign, audit and direct, with an example each.Connect the MCPThe Struq MCP in your client, with one sign-in.MCP toolsSeven free tools: four for the catalogue, three that read the library.Example promptsPrompts to paste, and the tool each one reaches for.What it fetches and sendsWhat the skill downloads and what the MCP stores.TroubleshootingThe common problems, each with its fix.

### Install the skill. (https://struq.app/docs/install)
One command installs it into every AI coding tool on your machine. Run it again to update, and add the word remove to take it out.

#### The command
`npx @struq/skill@latest`
Run it in a terminal, from any folder. It looks for your AI tools in your home folder and copies the skill into each one it finds. If it finds none, it installs into Claude Code.
It needs Node 18 or newer. No account, no key, nothing to configure.

#### Let your agent do it
Or hand the install to your agent. Copy the prompt for your tool and paste it in; the agent runs the command.

#### Every tool it covers
The command covers all seven. Each flag installs into that tool only, and the last column is how you call the skill once it is there.
Tool | Flag | How you call it
Claude Code | --claude | /struq <brief>
Cursor | --cursor | Ask for the struq skill by name
Codex | --codex | $struq <brief>
OpenCode | --opencode | Ask for the struq skill by name
Gemini CLI | --gemini | Ask for the struq skill by name
GitHub Copilot | --copilot | Ask for the struq skill by name
Windsurf | --windsurf | Ask for the struq skill by name

#### One tool, or one project
Add a tool’s flag to install into that tool only.
`npx @struq/skill@latest --claude`
Add --project to install into the current project instead of your home folder, so the skill travels with the repository.
`npx @struq/skill@latest --project`
Every flag the installer knows:
`npx @struq/skill@latest --help`

#### As a Claude Code plugin
Inside Claude Code, add the marketplace, then install the plugin.
`/plugin marketplace add struqapp/struq-design
/plugin install struq@struq`
As a plugin the command is /struq:struq <brief>.

#### With the skills CLI
The open skills CLI knows more than 70 agents. It installs the same skill from GitHub.
`npx skills add struqapp/struq-design -g`

#### Update
Run the install again. The @latest in the command always fetches the newest release and replaces the copy in each tool. The current version is 0.5.0.
`npx @struq/skill@latest`

#### Remove
`npx @struq/skill@latest remove`
It takes the skill out of every tool it finds it in. It takes the same flags, so npx @struq/skill@latest remove --cursor removes it from Cursor only.

### The four commands. (https://struq.app/docs/commands)
Each starts with /struq in Claude Code. In Codex type $struq instead, and in Cursor or OpenCode ask for the struq skill by name.

#### Build a site
/struq <brief>. 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 a portfolio for an architecture studio in Rotterdam, dark, calm, lots of photography`
The plan lands in STRUQ.md and the agent stops once to show it. Approve it or change it, and send a logo, photos or real numbers if you have them. It does not ask again.

#### Redesign a page you have
/struq redesign <path>. Keeps your brand, copy and components, and swaps in blocks where the page is weakest.
`/struq redesign app/page.tsx`
It writes a plan of the page as it will be, keeping your sections as they are, and stops once before it changes anything.

#### Audit a page
/struq audit <path-or-url>. Changes nothing. Returns everything that makes the page look AI-made, each with its fix, and the three changes that pay off most.
`/struq audit http://localhost:3000`
Point it at a file, a folder or a live address. You get findings, never a score.

#### Direct a 3D site
/struq direct <brief>. Directed mode, for one continuous 3D experience across chapters.
`/struq direct a launch site for a deep-sea research vessel, one continuous dive in four chapters`
It plans and stops once, as a build does, then builds one WebGL scene that carries through every chapter.

#### In other tools
The commands are the same everywhere; only the way you call the skill differs.
Tool | How you call it
Claude Code | /struq <brief>
Claude Code, as a plugin | /struq:struq <brief>
Codex | $struq <brief>
Cursor, OpenCode and the rest | Name it: “use the struq skill to build ...”

### Connect the MCP. (https://struq.app/docs/connect)
Add one address to your AI tool and sign in once. The skill works without it; with it, your agent gets the block catalogue as it stands today.

#### The address
`https://struq.app/api/mcp`
A remote MCP server over HTTP. It needs a free Struq account, because your client connects as you. All seven tools are free.

#### Your client
Claude Code
Run this in a terminal. The second line lists your servers, so you can see Struq arrived.
`claude mcp add --transport http --scope user struq https://struq.app/api/mcp
claude mcp list`
Without --scope user the server lands in this project only, and your next repository will not see it.
Codex
Add this to ~/.codex/config.toml (on Windows %USERPROFILE%\.codex\config.toml).
`[mcp_servers.struq]
url = "https://struq.app/api/mcp"`
Codex reads its server list when it starts. Open a new window after saving.
Cursor
Add this to ~/.cursor/mcp.json (on Windows %USERPROFILE%\.cursor\mcp.json).
`{
"mcpServers": {
"struq": {
"url": "https://struq.app/api/mcp"
}
}
}`
Cursor has no sign-in command. After the reload, open Settings, then MCP, and approve Struq there.
VS Code
Open the Command Palette, run MCP: Open User Configuration and add this.
`{
"servers": {
"struq": {
"type": "http",
"url": "https://struq.app/api/mcp"
}
}
}`
The top key is servers, not mcpServers, and "type": "http" is required. The Copilot CLI uses mcpServers instead, in the same shape.
Windsurf
Add this to ~/.codeium/windsurf/mcp_config.json (on Windows %USERPROFILE%\.codeium\windsurf\mcp_config.json).
`{
"mcpServers": {
"struq": {
"serverUrl": "https://struq.app/api/mcp"
}
}
}`
Windsurf reads serverUrl, not url.
Antigravity
Add this to ~/.gemini/config/mcp_config.json (on Windows %USERPROFILE%\.gemini\config\mcp_config.json).
`{
"mcpServers": {
"struq": {
"serverUrl": "https://struq.app/api/mcp"
}
}
}`
Antigravity reads serverUrl, not url. The IDE and the CLI share this file, so one setup covers both.
Claude, desktop and web
Open Settings, then Connectors, then Add custom connector. Name it Struq and paste the address.
`https://struq.app/api/mcp`
Custom connectors need a paid Claude plan. On a free plan, use Claude Code instead.

#### Sign in
The first time your agent calls Struq, your client opens a sign-in page. Sign in with your Struq account and your agent can use every tool.
You sign in once per client. It asks again only when the sign-in expires or you revoke it.

#### Check it works
Ask your agent which Struq tools it sees.
`Which Struq tools can you see?`
Seven: four for the catalogue and three that read the library. The tools page says what each one does.

#### Disconnect
Revoke the connection in your Struq account, under AI connections. Access stops at once. Remove the lines from your client’s config as well, or it keeps asking you to sign in.

### The MCP tools. (https://struq.app/docs/tools)
Seven tools in two groups, all free with a free account. The four catalogue tools cover a whole build. The three library tools read the Struq library and change nothing.

#### The catalogue
The names are Dutch: richting is direction, blokken is blocks, blok is block, controle is check. You do not need them; describe what you want and your agent picks the tool.
Tool | What it does
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.
Your agent composes the page: it chooses the blocks and their order, writes each block’s files exactly as returned and runs the check on its own machine. There is no required order and nothing to carry between calls.

#### The library
These read the palettes, type pairings, design systems, sections and imagery in the Struq library. They change nothing.
Tool | What it does
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.

#### Which tools your agent sees
All seven, once you sign in with a free account.

### Example prompts. (https://struq.app/docs/example-prompts)
You do not need tool names. Describe what you want and your agent picks the tool. Each prompt below says which one it reaches for.

#### Choose a direction
`I’m building a site for a physiotherapy practice in Utrecht. Calm and trustworthy. Which visual direction fits?`
Uses struq_richting: a palette, a type pairing and photos, ready for the blocks. Free.

#### Build a homepage
`Use Struq to build a homepage for an architecture studio in Rotterdam. Light, spacious, lots of photography.`
Uses struq_richting first, then struq_blokken and struq_blok for the blocks the plan names, written into your project as real files. Free.

#### Check a site
`Check my site for consistency and give me the three most important fixes.`
Uses struq_controle. The check runs on your own machine and returns findings, not a score. Free.

#### Find a palette
`Find a warm palette for a bakery in the Struq library and give me its exact colours.`
Uses struq_search_assets, then struq_get_asset for the one it picks. Free.

### What it fetches and sends. (https://struq.app/docs/privacy)
The skill runs in your project and sends nothing of yours. The MCP sees only the calls your agent makes to it.

#### The skill
The skill is instructions, the block files and five small Node scripts (blocks.mjs, canon.mjs, images.mjs, check.mjs, log.mjs) that your agent runs in your project. They read and write files there, including a build log, STRUQ-LOG.md.
- Blocks and the direction ship inside the skill. Nothing is fetched to install a block or write the tokens.
- Fonts load from Google Fonts, or Fontshare for a face that lives there, in the visitor’s browser, as on any site with web fonts.
- Photos, for every slot your own photos do not fill: images.mjs reads the public pack list at https://struq.app/api/media/packs and downloads the chosen images from https://struq.app/media/packs/. Offline it writes plates graded to your palette instead.
- The installer downloads the package from npm, looks for your AI tools’ folders in your home folder and copies the skill into them. It sends nothing.

#### The MCP
If you connect it, your agent calls Struq’s tools with your brief. Nothing else leaves your machine. Struq never reads your code: the check runs on your side.

#### What Struq stores
What | Kept for
The connection: your client, what you allowed, hashed tokens | Until you revoke it
Each tool call: which tool, the outcome, how long it took | One year
Struq never stores what you ask or what comes back.

#### Disconnect
Revoke the connection in your Struq account, under AI connections. Access stops at once. The skill needs no account, so there is nothing to disconnect there: remove it with npx @struq/skill@latest remove.

### When something fails. (https://struq.app/docs/troubleshooting)
The common problems, each with its fix. Most come down to a tool that needs a fresh window.

#### The skill does not show up
Open a new session: most tools read their skills when they start. Still missing? Run the install with your tool’s flag, for example npx @struq/skill@latest --cursor, and read what it prints: one line per tool, with where the skill went.

#### It installed into the wrong tool
When the installer finds no AI tool, it installs into Claude Code. Name your tool with its flag instead: --cursor, --codex, --opencode, --gemini, --copilot or --windsurf.

#### The install command fails
The installer needs Node 18 or newer. Check with node --version and update Node if it is older.

#### Struq does not appear in my client
Open a new window: most clients read their MCP servers only when they start. In Cursor, approve the connection afterwards under Settings, then MCP. In Windsurf and Antigravity the key is serverUrl, not url.

#### I only see four tools
Your client still holds the tool list from an older connection. Every account now gets all seven. Open a new window, or connect again, so your client reads the list afresh.

#### I have to sign in again
On the first connection that is expected. Later, it means the sign-in expired or was revoked. Connect again.

#### I use Claude on a free plan
Custom connectors in the Claude app need a paid Claude plan. Use Struq through Claude Code instead.

#### A tool returns an error
Try again after a minute. If it keeps failing, email support@struq.nl with the tool name and the time.

## Questions (https://struq.app/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
- Icons on npm: https://www.npmjs.com/package/@struq/icons