design-system-builder

What the skill does

From a logo, a few colours and the product documents, your agent builds a design system people can use: one page that shows every decision with copyable values, and a short file coding agents read.

The page works offline, in all your languages, and is checked in a real browser.

Compatibility, agent by agent

• Native, testedoriginal format, verified on a real project
• Adapted, testedadaptation file provided and verified
• Not testedno promise
• Not compatiblethe reason is written

What the package contains

215 files, 15.0 MB unpacked, 3.7 MB ZIP. Everything is readable; dependencies ship with their licence, nothing is installed separately.

What your machine needs

What the agent will ask you to allow

• Read and write the project folder
• Run python and node
• Open a headless browser
• Network on demand: api.iconify.design

Install the skill

Two ways: one command, or the ZIP unzipped by hand. Pick your agent.

The install command will be published soon; until then, install the skill by hand from the ZIP.

Using the skill

Just ask for the result. The agent asks what is missing (product type, languages, screens), works in phases and looks at its screenshots before saying it is done.

• Creation

  "Create our CRM's design system in French, Italian and English. Here are the logo and the colour sheet."

• Adding a section

  "Add a Products section to our design system, with the product page and stock per warehouse."

• Illustrations

  "Make our CRM's empty-state illustrations: no leads, empty inbox, no results, 404 and 500 pages."

• Accessibility

  "Add an accessibility button: text size, higher contrast, colour-blind colours, animations off."

The commands, if you want to run them yourself

python scripts/new_project.py ../acme --name "Acme" --type crm --langs fr,it,en --source fr
python scripts/palette_check.py ../acme
python scripts/build.py ../acme
node scripts/qa.mjs ../acme
node scripts/qa.mjs ../acme shots

Security and privacy

• No data sent to SOGNI DIGITALI

  The skill has no telemetry, no counters, no calls to our servers. Your brand and documents stay on your machine.

• One network call, on request

  scripts/fetch_icons.py downloads the chosen icons from the public Iconify API. The build and the page work offline.

• Readable code

  Plain Python and JavaScript, no compiled files, no hidden code. Read them before the first run.

• Declared dependencies

  Hairline (MIT), playwright-core (Apache-2.0), Atkinson Hyperlegible (OFL): versions and licences in THIRD_PARTY_NOTICES.md.

• Download integrity

  Every ZIP ships with its SHA-256 checksum, shown on this page. The install command checks it before writing any file.

Versions and changes

1. 1.0.0
   • Three colour modes: Dark, Light and Colour, with cool, warm and balanced temperatures.
   • Glowing card edge, on hover and keyboard focus only.
   • Shared "AI-generated image" caption, always outside the image.
2. 0.9.0
   • First release: light and dark themes, SVG splash, Hairline illustrations, accessibility panel, in-browser QA.

Support and questions

• By email

  support@sognidigitali.com, with the skill name and version. Response time.

• Documentation included

  README, SKILL.md and fourteen references: the full method is in the package.