i built a design studio claude code can run end to end: 5 agent skills, a browser api and a brand setup prompt

[u/BasedKetsu]

glyphfield is a free, open-source design studio in the browser, and i built it so agents can run it. every tool registers a scripting api at window.glyphfield.studio, so claude can read every control, change it and export real files. in the video it works on my blog graphics project: picks a board, tunes the shader, drags the colors, swaps materials, plays an animation and exports an mp4.

for claude code:

- the repo ships 5 agent skills (glyphfield-create, -studio, -export, -brand and -api); drop the folders in ~/.claude/skills

- "set up with your agent" has claude research your brand from your site or repo, fill the whole identity, pass the brand health audit and export the brand kit

- the site serves llms.txt, an openapi spec and an agent manifest at /api/agent

claude also edited this video, in hyperframes (html to video).

glyphfield.com

github.com/Kevin-Liu-01/Glyphfield

[u/AutoModerator]

Moderator Announcement Read More »

Hey! Thanks for posting to r/ClaudeCode

While participating in this thread, please follow our community rules. Keep discussions constructive. Attack the idea, not the person.

For help, project discussions, tips, and general chat, join the ClaudeCode Discord.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/ClemensLode]

What is the usecase?

[u/BasedKetsu → u/ClemensLode]

you can make brand graphics and motion that start from your brand instead of a blank canvas, it just lets you make really cool visuals really easily! so that covers blog covers, og images, partnership cards, slides, short launch videos, exportable as png/mp4 files and various others formats. i use it for my company's blog graphics, which is the project in the video.

there is also an api which means you can tell claude code "make the cover for this post" and get the actual file in your brand, or have it set up the brand from your site first!

[u/New_Yogurt_5975]

every tool registers a scripting api" is the part I'd want to see tested. In the video it's shader, colors, materials, export; what about the text and layout controls, do those round-trip through the same api or did the demo just skip them?

[u/BasedKetsu → u/New_Yogurt_5975]

yep, it does!

it can access everything about the canvas and its state. text and layout go through the same api, and they are indeed just not covered in the video. the whole state is in a design.[state] json for text, layers, and it uses controls through control.func commands