The AI tool for designers that answers in layers

Hand the agent your production pass and get back frames made of elements: real type, real spacing, tokens the whole file reads. You art direct; it produces.

AI that answers in layers and tokens, never a flat render.

The shared live canvas: agent-drafted frames beside the hand-set specimen that governs them. Click in and drag any layer.

An AI tool for designers who kept their standards

Most generated design fails you at the exact moment you reach for it: the render looks plausible, then you try to nudge the type and discover there is no type, only pixels shaped like some. Accepting it means shipping someone else's kerning.

Shyne's agent returns work in your medium. Frames arrive as real elements with real styles, every one promoted to a layer, sitting on the tokens your project already defines. It is a production pass you can mark up, not a verdict you appeal by prompt.

Start directing

The agent reads the frame you built by hand as the spec and extends the run, layer for layer.

Control at the resolution you actually work at

Because a frame is live HTML, the properties you care about exist and are yours: family, weight, size, line height, tracking, measure, spacing set on the element rather than approximated by a preset.

Page, ink, accent and both type families live as design variables the whole project reads, so a system decision is made once and holds everywhere.

If you can name the property, you can set it.

What comes back when the agent works

  • Layers

    Every element it writes is selectable and movable, down to the rule under the headline.

  • Working type

    Text stays text with its full character: face, weight, tracking, measure, all live.

  • Tokens, honored

    New frames read your variables instead of inventing near-miss grays and off-brand blues.

  • Undo, intact

    Its pass lands as edits you can roll back without losing your own morning.

Page, ink, accent and both type families are tokens, so a swatch change re-inks the set.

Every AI works on the same designers canvas.

Bring the agent you already use. It reads the brief, sees the work and writes the next editable frame — no exported file, no paste, no drift.

Claude Code connected to ShyneMCP

Build five more frames in this system and keep my type scale. build the complete working system.

shyne · canvas.read designers
shyne · canvas.write_html writes editable frames
shyne · canvas.write_html shared canvas

Five frames on your grid, all layers is now composed on the same live canvas.

ChatGPT connected to ShyneMCP

Build five more frames in this system and keep my type scale. create three useful variants.

shyne · canvas.read designers
shyne · canvas.write_html writes editable frames
shyne · canvas.create_variants shared canvas

Five frames on your grid, all layers is now composed on the same live canvas.

Gemini connected to ShyneMCP

Build five more frames in this system and keep my type scale. compose the visual direction.

shyne · canvas.read designers
shyne · canvas.write_html writes editable frames
shyne · media.compose shared canvas

Five frames on your grid, all layers is now composed on the same live canvas.

Cursor connected to ShyneMCP

Build five more frames in this system and keep my type scale. turn the approved frame into code.

shyne · canvas.read designers
shyne · canvas.write_html writes editable frames
shyne · canvas.read_html shared canvas

Five frames on your grid, all layers is now composed on the same live canvas.

Grok connected to ShyneMCP

Build five more frames in this system and keep my type scale. prepare the publishing pass.

shyne · canvas.read designers
shyne · canvas.write_html writes editable frames
shyne · schedule.prepare shared canvas

Five frames on your grid, all layers is now composed on the same live canvas.

Your agent connected to ShyneMCP

Build five more frames in this system and keep my type scale. run your own workflow on the canvas.

shyne · canvas.read designers
shyne · canvas.write_html writes editable frames
shyne · mcp.call shared canvas

Five frames on your grid, all layers is now composed on the same live canvas.

One shared canvas

Every designers frame stays visible to people and agents at the same time.

Always on brand

Your colors, type and reusable assets stay attached to every designers variation.

Editable output

The result lands as real frames and objects, ready for the next human decision.

Media in context

Generate or place imagery where the composition needs it, without leaving the working surface.

Open to every agent

Claude, ChatGPT, Gemini, Cursor, Grok and your own agent work through the same MCP surface.

Ready to ship

Move from the approved canvas to the useful file, link or published format without rebuilding it.

Direct it like a senior directs a junior

Short, specific asks against work that is on the canvas in front of both of you. It executes; you keep the eye.

  • Loosen the tracking on every display headOne pass over the headline layers across the set; body copy untouched.
  • Rough a case study from these six shotsImages placed on your grid with captions set in the secondary face, ready for markup.
  • Try the cover again with looser leadingA variant lands beside the original, so the call is made by eye, not memory.

Rough the structure, direct each pass, and the inked screen is still elements, not pixels.

Delegate the production, keep the art direction

The fifth size, the eleventh variant and the deck that quotes the hero stop costing your evening. What ships is still set to your eye, because every pass came back editable and you touched what mattered.

It does the production passes. The eye they answer to is yours.

Questions

Does the AI output flattened images?

No. Frames are live HTML with every meaningful element promoted to an editable layer, so type is type and spacing is spacing. The agent's work opens exactly like yours does.

Is Shyne a Figma replacement?

Not for interface systems work; component libraries and the spec your engineers read should stay put. Shyne is for the artifacts around the product: decks, case studies, one-pagers, posts and sites, plus the variants of each.

How much typography control do I get?

Element-level control: family, weight, size, line height, tracking and measure, with two type families held as design variables so the system stays coherent as the file grows.

Can the agent follow my existing style?

Yes. Your frames are its context, so build one the way you want it and ask for more in that system. It extends what is on the canvas rather than improvising from the prompt alone.

Start directing

AI that answers in layers and tokens, never a flat render.

Open Shyne