106.9K+Download
Skip to the usage guide
Create Canvasby ibelick

Create Canvas Skill.

Keep live design alternatives in a named, movable comparison workspace.

  • Design Exploration
  • Canvas
Download OpenDesignView Usage Guide
Source Review · create-canvasSKILL.md
Task Keep live design alternatives in a named, movable comparison workspace. Produces A source-defined registry of named, live preview items. Before You Start Membership and preview implementation stay in source; storage cannot create or hide content.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Keep live design alternatives in a named, movable comparison workspace

Build a freeform canvas with named live previews, independent alternatives, saved layout and safe input-preserving interactions.

Source-based workflowNot an execution benchmark

The Working Approach

Create Canvas builds a workspace for exploring several live design alternatives through conversation. Each preview has a stable ID and a readable name in a source-defined registry. Users can copy the name to reference a specific version, move previews with dedicated handles and navigate through pan or zoom.

Content remains in source files while browser storage remembers layout. That distinction makes follow-up requests concrete: another version receives its own identity and state, while a change to an existing version preserves its place. The skill keeps experiments local until moving them into production is requested.

Expected Deliverables

  • A source-defined registry of named, live preview items.
  • A canvas with movement handles, camera controls and supported global theme selection.
  • Saved camera and item positions with a report of verified and untested interactions.
See the Example Brief

From Brief to Review

  1. 01
    Establish a safe live preview

    Inspect an existing canvas before creating another. Mount one preview with synthetic data and a separate label and move handle, using the project's own framework.

  2. 02
    Add distinct alternatives

    Give each new variation a stable ID, unique name and independent state. Keep previous alternatives and measured positions intact when adding content.

  3. 03
    Preserve input while navigating

    Separate canvas gestures from typing, selection and nested scrolling. Keep portals native and check that copying, moving or zooming does not remount previews.

  4. 04
    Save layout and verify behavior

    Persist bounded camera values, supported theme and positions by registry ID. Validate reloads, malformed storage and relevant device gestures before reporting them as working.

02 When to Use It

When to Use It

Membership and preview implementation stay in source; storage cannot create or hide content.

A Good Fit

  • Design comparisonHold several live alternatives side by side and reference them by exact names.
  • Continuing explorationRevisit an existing workspace without losing previous alternatives or layout decisions.

Limits to Check

  • Source owns contentMembership and preview implementation stay in source; storage cannot create or hide content.
  • Production isolationExperiments use safe fixtures and do not change production component code.
  • Limited editor scopeDrawing, connectors, resizing and undo history are omitted unless requested.

Bring These Inputs

  • Experiment listName the alternatives, intended dimensions and differences to explore.
  • Safe componentsSupply public component APIs and fixtures that avoid personal data and live writes.
  • Existing workspaceIdentify the current route, registry, theme and layout to preserve.

03 Decisions That Matter

Decisions That Matter

  1. Precise references

    Copyable names make a follow-up such as changing one version unambiguous.

  2. Independent alternatives

    New versions keep separate identities and interactive state.

  3. Persistent arrangement

    Saved layout restores positions while current source remains authoritative.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Name the alternatives, intended dimensions and differences to explore.

Upstream Source File
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use create-canvas to compare three pricing-card experiments in our existing project. Keep the original card and create two independently named alternatives with the same plan data and dimensions. Use safe fixtures and retain our current production component implementations. Add copyable names, dedicated movement handles, pan, zoom and fit controls. Preserve typing and selection inside previews. Save layout rather than form contents. After building, test reloads, movement and zoom, and report device gestures or browser history behavior that you could not verify.

Inspect the Result

Check the actual output against these observable criteria.

  • New alternatives preserve earlier IDs, names and positions.
  • Camera changes and item movement do not erase preview input.
  • Storage contains layout only and invalid entries fall back safely.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
ibelick
Repository
ibelick/ui-skills
Skill File
SKILL.md
License
MIT
Reviewed Snapshot
2026-11-02 · 4907a526b079
Editorial Source Summary
Keep live design alternatives in a named, movable comparison workspace.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can browser storage become the content source?

No. The registry defines membership and implementation; saved positions apply only to current IDs.

Does a separate iframe guarantee safety?

No. The source requires safe providers and fixtures before mounting; document separation alone does not prevent real requests.

Does reset remove the experiments?

Reset changes the camera while preserving membership, positions, themes and drafts.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md