frizynn

Designboard — Design skill for Claude Code

Design community

A portable visual canvas for coding agents.

How to install Designboard

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

What Designboard does

A portable visual canvas for coding agents. Draft and edit HTML artboards, then save everything as one local file.

Alternatives in Design

Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Canvas — Open, create, or update a visual canvas — add images, text, PDFs, wiki pages, and banana-generated assets to O 3.3k ★

README

![Designboard, a portable visual canvas for coding agents](.github/assets/designboard-banner.png)

Designboard

[![CI](https://github.com/frizynn/designboard/actions/workflows/ci.yml/badge.svg)](https://github.com/frizynn/designboard/actions/workflows/ci.yml) [![GitHub release](https://img.shields.io/github/v/release/frizynn/designboard?color=111111)](https://github.com/frizynn/designboard/releases/latest) [![License: MIT](https://img.shields.io/badge/license-MIT-111111.svg)](LICENSE)

**A portable visual canvas for coding agents.**

Designboard lets an AI agent draft real HTML artboards and hand them back on an editable, pan-and-zoom canvas. Refine text, color, spacing, layout, and source directly in the browser, then save the entire design as one portable HTML file.

No hosted service. No account. No build step. No lock-in.

Install

Install Designboard as an [Agent Skill](https://agentskills.io):

npx skills add frizynn/designboard

The installer detects supported coding agents and lets you choose where to install the skill. Designboard follows the open [`SKILL.md` specification](https://agentskills.io/specification), so it works with compatible clients such as Codex, Claude Code, Cursor, and others.

Manual installation

git clone https://github.com/frizynn/designboard
ln -s "$PWD/designboard" ~/.codex/skills/designboard
ln -s "$PWD/designboard" ~/.claude/skills/designboard

Use it

Ask your coding agent for a visual design. For example:

Use Designboard to draft a responsive pricing page that matches this repository's design system.
Include desktop and mobile artboards.

The agent inspects the current product, authors one or more HTML artboards, and returns a single canvas file. Open that file in any modern browser to review and edit the result.