az9713

Claude Code Design Demo — Design skill for Claude Code

Design community

Claude Code /design skill demo: three Instagram-post variations on one editable canvas with aggressive tweak controls.

How to install Claude Code Design Demo

This entry records only its repository, not the path inside it, so there is no exact command to give. Open az9713/claude-code-design-demo and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Code Design Demo does

Claude Code /design skill demo: three Instagram-post variations on one editable canvas with aggressive tweak controls. Follows the workflow from the YouTube video 'Claude Code Just Got Its Biggest Design Upgrade Of The Year'.

Alternatives in Design

NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★
Kode Agent — Kode Agent — Design for post-human workflows 5k ★
Home Assistant Vibecode Agent — Home Assistant MCP server agent 617 ★

README

Claude Code /design demo

About

A test-drive of the Claude Code `/design` skill (2026-08-28). One prompt produced three Instagram-post variations (1080×1080) that announce the skill, each in a deliberately different aesthetic, on a single editable canvas with aggressive tweak controls.

This project follows the workflow shown in the video [Claude Code Just Got Its Biggest Design Upgrade Of The Year (And Here's How To Master It)](https://www.youtube.com/watch?v=nSfEL1Y-nUk), using the same prompts against this machine's own skill set.

Option A · Amber Terminal — amber CRT screen, IBM Plex Mono, scanlines and glow
Option B · Swiss Poster — flat cobalt, giant "/design" in Archivo Black, strict grid
Option C · Riso Zine — cream paper, two-ink risograph look, halftone dots

Each artboard carries 16–19 controls in the canvas Tweaks panel, grouped as Copy / Type / Style / Effects-Layout.

Live canvas

**Open the design here:** 👉 https://claude.ai/code/artifact/54cbaf08-96f0-4da3-8133-f91fbd11fb50?via=auto_preview

GitHub does not run iframes in a README, so the page cannot embed inline. Click the preview below (the Tweaks panel in action) to open the live canvas:

[![Live canvas preview — Tweaks panel](tweaks.png)](https://claude.ai/code/artifact/54cbaf08-96f0-4da3-8133-f91fbd11fb50?via=auto_preview)

Repository contents

File	Role
`Main.dc.html`	Option A · Amber Terminal artboard (source of truth)
`SwissPoster.dc.html`	Option B · Swiss Poster artboard (source of truth)
`RisoZine.dc.html`	Option C · Riso Zine artboard (source of truth)
`canvas.json`	Canvas layout: three 1080×1080 frames in a row, 100px gaps
`design-skill-launch-post.html`	Seeded canvas output — never edit; regenerate
`HANDOFF.md`	Resume file: state, re-seed and republish procedure
`DEVELOPMENT-JOURNEY.md`	Warts-and-all story of the build session