New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Flexible Visual System

by scott-fryxell in scott-fryxell/brayness

Derive a project's visual rules from its existing tokens, palette, type scale, logo, and icons (Intake), then generate raw SVG vector graphics from those rules as a small composable set (module…

MITAuto-check passedFrontend & Design

Install Flexible Visual System

skills CLI
$ npx skills add scott-fryxell/brayness --skill flexible-visual-system -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install scott-fryxell/brayness flexible-visual-system --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/flexible-visual-system .claude/skills/flexible-visual-system && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
flexible-visual-system
GitHub stars
125
Token cost
~1.9k tokens
SKILL.md length
930 words
Files
7 (incl. references)
Skills in repo
27
Repo updated
First seen
Licence
MIT

At a glance

Derive a project's visual rules from its existing tokens, palette, type scale, logo, and icons (Intake), then generate raw SVG vector graphics from those rules as a small composable set (module…

  • Works in 4 steps: Scan - read the project's existing… → Map - translate findings onto the six… → Bootstrap - if scan finds nothing… → …
  • Include build a visual system
  • SKILL.md covers Core idea, Intake: deriving rules from a…, The rules file (project source… and The six primitives, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Flexible Visual System is an agent skill from scott-fryxell/brayness. Derive a project's visual rules from its existing tokens, palette, type scale, logo, and icons (Intake), then generate raw SVG vector graphics from those rules as a small composable set (module, grid, repetition, transformation, color, controlled randomness), following Martin Lorenz's flexible visual systems approach. Use as a playground to explore and discover identity systems, patterns, posters, icon sets, and generative marks that stay coherent while producing infinite variation. Triggers include "build a…

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/examples.md`, `references/intake.md` and `references/playground.md`).

It sits in Frontend & Design, covering Icons and illustration, Typography and Design systems. The repository describes itself as: A harness for the anxious digital mind. A safe place for creatives to keep their creative soul while exploring digital skills. The licence is MIT.

When your agent uses it

  • Include build a visual system
  • Generate SVG patterns
  • Create a flexible identity
  • Make a generative graphic playground

Example prompts

  • “build a visual system”
  • “generate SVG patterns”
  • “create a flexible identity”
  • “/flexible-visual-system”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Scan - read the project's existing tokens, palette, type scale, logo,
  2. Map - translate findings onto the six primitives (palette -> Color,
  3. Bootstrap - if scan finds nothing usable: a short guided interview
  4. Lock - write the chosen rules to the project's rules file so future

What it can do on your machine

Read from SKILL.md and the folder at commit 71f10e2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Flexible Visual System loads about 1.9k tokens when it runs, and up to ~7.7k if it reads all its reference files. Until then it costs about 199 tokens; SKILL.md has 930 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~199
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from scott-fryxell/brayness at commit 71f10e2, republished under its MIT licence (© scott-fryxell). 930 words, ~1,907 tokens.

Download SKILL.mdSave it as .claude/skills/flexible-visual-system/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
flexible-visual-system
description
Derive a project's visual rules from its existing tokens, palette, type scale, logo, and icons (Intake), then generate raw SVG vector graphics from those rules as a small composable set (module, grid, repetition, transformation, color, controlled randomness), following Martin Lorenz's flexible visual systems approach. Use as a playground to explore and discover identity systems, patterns, posters, icon sets, and generative marks that stay coherent while producing infinite variation. Triggers include "build a visual system", "generate SVG patterns", "create a flexible identity", "make a generative graphic playground", "explore module-based design", "derive rules from this project", or producing design-system assets for a project from rules rather than hand-drawing.

Flexible Visual System

Generate raw SVG from rules, not by hand-drawing. One small rule set produces a coherent family of infinite variations.

Based on Martin Lorenz (new.twopoints.net/fvs), Flexible Visual Systems: design the system, not the output. Fixed rules + variable inputs = consistent identity that flexes.

Flow: intake -> sweep -> tune -> lock -> export. Intake derives rules from the project; the rest explores on top of them.

Core idea

A visual system is f(rules, seed) -> SVG.

  • The rules stay fixed (that is what makes the family coherent).
  • The seed / inputs vary (that is what makes each output distinct).
  • You explore by sweeping inputs in a playground, then lock the ones worth keeping as design-system assets.

Do not draw a logo. Build the machine that draws thousands of valid logos, then pick.

Intake: deriving rules from a project

The playground needs rules to sweep. Intake gets them from the project, not from thin air. Run it before any sweep.

Scan -> Map -> Bootstrap -> Lock.

  1. Scan - read the project's existing tokens, palette, type scale, logo, icons, base grid. A handful of anchors is enough; do not audit exhaustively.
  2. Map - translate findings onto the six primitives (palette -> Color, logo symmetry -> Transformation quantization, container grid -> Grid cols, stroke weight -> Module weight, etc.).
  3. Bootstrap - if scan finds nothing usable: a short guided interview (mood, 2 anchor colors, one motif, structure, do/don't, optional reference), then propose one minimal starter rule set with a why per rule. Not three to pick from - one, derived from what they said.
  4. Lock - write the chosen rules to the project's rules file so future runs read it first instead of re-deriving.

Read references/intake.md for the scan checklist, the finding-to-primitive map, the interview questions, and the bootstrap-to-lock handoff.

The rules file (project source of truth)

The locked rules live in visual-system.md at the project root. The skill reads it before every generate/sweep/export, and writes back when a rule changes or a keeper is locked.

Format: markdown, one rule per bullet, each followed by a why: line. The why is what lets you edit intent, not just values. Keepers record their seed

  • params so any output is reproducible from the file.

Read references/project-rules.md for the format, the read/write contract, and a full example file.

The six primitives

Every system is assembled from these. Keep the set small.

PrimitiveWhat it controlsExample knobs
ModuleThe base mark/cellshape, stroke weight, corner style, fill rule
GridCoordinate scaffoldcolumns, rows, cell size, gutters, isometric/skew
RepetitionHow modules multiplytile, array, ring, spiral, recursive subdivision
TransformationPer-instance changerotate, scale, mirror, shear, displace
ColorPalette + assignment logicpalette set, per-cell rule, gradient, by-position
RandomnessControlled variationseeded RNG, jitter range, probability of a rule firing

Read references/primitives.md for the rule vocabulary and how primitives compose.

How we generate SVG (no library)

We build SVG ourselves as strings or DOM. No p5, no svg.js.

  • Define a viewBox and treat it as the coordinate system (the grid lives here).
  • Place modules by computing x, y from grid indices.
  • Apply transforms with the transform attribute (translate/rotate/scale/matrix).
  • Assign color by rule, keyed on cell index/position/seed.
  • Use a seeded RNG so any output is reproducible from its seed.

Read references/svg-generation.md for the construction patterns (coordinate math, transform composition, seeded RNG, export).

Show full SKILL.md (390 more words)Show less

Playground workflow

The goal is exploration first, assets second.

  1. Start from the locked rules - read visual-system.md. If it is missing, run Intake first. The sweep varies seeds and params on top of the locked rules; it does not re-derive them.
  2. Generate a sweep - render many seeds side by side as a contact sheet (grid of SVGs).
  3. Read the family - judge coherence and variety. Too samey -> add a knob. Too chaotic -> remove one.
  4. Tune knobs - adjust ranges, not individual outputs.
  5. Lock keepers - record the exact rules + seeds that produced winners back into the rules file.
  6. Export assets - emit those as standalone SVG files for the project.

Read references/playground.md for the contact-sheet pattern and the tuning loop.

Output contract

When generating a system, return:

  1. Read the rules file - load visual-system.md first. If missing, run Intake.
  2. Rule set - the chosen primitives and their knobs, stated explicitly.
  3. Generator - the SVG-producing code (vanilla JS), seedable and reproducible, driven by the locked rules.
  4. Contact sheet - a multi-seed sweep on top of the locked rules so the family is visible, not a single output.
  5. Keepers - the seeds/params worth exporting, recorded back into the rules file with why.
  6. Export note - how to pull a keeper out as a standalone SVG.

Worked examples

See references/examples.md for:

  • Happy path: a 3-rule module-on-grid system with a seed sweep
  • Robust variant: same system made reproducible, accessible, and export-ready
  • Anti-pattern + fix: hand-tuning individual outputs (breaks the system) vs tuning rules

Principles

  • Tune rules, not outputs. If you find yourself nudging a single shape, that belongs in a rule or it is noise.
  • Keep the rule set small. Coherence comes from few rules applied consistently, not many exceptions.
  • Seed everything. Every output must be reproducible from (rules, seed).
  • Show the family, not the favorite. Always render a sweep before judging.
  • Constraints make it flex. A tight grid + one transform yields more usable variation than freeform drawing.

Anti-patterns

  • Hand-editing generated SVG node-by-node (you left the system)
  • Unseeded Math.random() (outputs cannot be reproduced or exported reliably)
  • Ten special-case rules to force one look (collapse them into fewer general rules)
  • Judging the system from a single render
  • Skipping Intake and picking a module from thin air (outputs won't tie to the project's existing visual language)
  • Reaching for p5/svg.js when plain SVG strings do the job

© scott-fryxell, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (references) in skills/flexible-visual-system of scott-fryxell/brayness.

  • SKILL.md
  • references/examples.md
  • references/intake.md
  • references/playground.md
  • references/primitives.md
  • references/project-rules.md
  • references/svg-generation.md

Open the folder on GitHubat commit 71f10e2

Compare with similar skills

Flexible Visual System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Flexible Visual System compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flexible Visual System this skillscott-fryxell/brayness125—~1.9kAutomated safety check: PassMIT
Replica DesignJakeschincariol/replica-skill1.4k—~994Automated safety check: PassMIT
Webui Designnotivn/AIEV127—~3.5kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Scalar Design Systemscalar/scalar16k—~2.7kAutomated safety check: PassMIT

Similar skills

  • Replica Design

    Jakeschincariol/replica-skill

    Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets…

    1.4k GitHub stars~994 tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • Webui Design

    notivn/AIEV

    Design system for the AI Edit Video web dashboard (noti.vn) - the three-step type scale, light/dark color tokens, the component primitives every page must use, Inter font, SVG icons, Shopify Admin…

    127 GitHub stars~3.5k tokensUpdated yesterday
    Media & CreativeAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Scalar Design System

    scalar/scalar

    Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

    16k GitHub stars~2.7k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Stitch Taste Design System

    google-labs-code/stitch-skills

    Official

    Generates a DESIGN.md design-language file for Google Stitch that encodes color, typography, layout, component behavior and motion rules to avoid generic AI-looking UI.

    8.5k GitHub starsUsed in 15 repos~3.1k tokens
    Frontend & DesignAuto-check passed

More from scott-fryxell/brayness

All 27 skills in this repo

  • Logo Finder

    scott-fryxell/brayness

    Find and install brand SVG logos via SVGL (https://svgl.app/) and Wikimedia Commons fallbacks into any project's static asset folder.

    125 GitHub stars~1.1k tokensUpdated 13 days ago
    Auto-check passed

  • Test Coverage

    scott-fryxell/brayness

    Write Vitest specs for Vue 3 JavaScript (Vite Plus, happy-dom, @vue/test-utils) and analyze V8 coverage + Fallow health to prioritize test-first refactors.

    125 GitHub stars~1.6k tokensUpdated 13 days ago
    Auto-check passed

  • Hyperframes

    scott-fryxell/brayness

    Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.

    125 GitHub stars~3.2k tokensUpdated 13 days ago
    Auto-check passed

  • Motion Systems

    scott-fryxell/brayness

    A skill your agent uses when designing or implementing motion for web interfaces, including CSS transitions and keyframes, linear() easing design, transform strategy (translate/rotate vs…

    125 GitHub stars~1.7k tokensUpdated 13 days ago
    Auto-check passed

  • Vue Inspect

    scott-fryxell/brayness

    Inspect live Vue 3 component state via agent-browser eval - no Devtools extension, no console.log.

    125 GitHub stars~779 tokensUpdated 13 days ago
    Auto-check passed

  • Vuetify To Semantic

    scott-fryxell/brayness

    Refactor a Vue page or component from Vuetify to semantic HTML5 + Schema.org microdata + Stylus element selectors.

    125 GitHub stars~1.2k tokensUpdated 13 days ago
    Auto-check passed

Categories

Questions about Flexible Visual System

What does Flexible Visual System do?

Derive a project's visual rules from its existing tokens, palette, type scale, logo, and icons (Intake), then generate raw SVG vector graphics from those rules as a small composable set (module…. Flexible Visual System is an agent skill from scott-fryxell/brayness. Derive a project's visual rules from its existing tokens, palette, type scale, logo, and icons (Intake), then generate raw SVG vector graphics from those rules as a small composable set (module, grid, repetition, transformation, color, controlled randomness), following Martin Lorenz's flexible visual systems approach.

When should I use Flexible Visual System?

Flexible Visual System fits situations like: include build a visual system; generate SVG patterns; create a flexible identity; make a generative graphic playground.

How do I install Flexible Visual System in Claude Code?

Run `npx skills add scott-fryxell/brayness --skill flexible-visual-system -a claude-code`. Or copy the skill folder (skills/flexible-visual-system in scott-fryxell/brayness) into .claude/skills/flexible-visual-system in your project. Claude Code loads it when a task matches its description.

How do I install Flexible Visual System in Codex?

Run `npx skills add scott-fryxell/brayness --skill flexible-visual-system -a codex`. Or copy the skill folder (skills/flexible-visual-system in scott-fryxell/brayness) into .agents/skills/flexible-visual-system in your project. Codex loads it when a task matches its description.

Can I use Flexible Visual System in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add scott-fryxell/brayness --skill flexible-visual-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/flexible-visual-system, .gemini/skills/flexible-visual-system, .github/skills/flexible-visual-system and .opencode/skills/flexible-visual-system in your project.

What does Flexible Visual System need to run?

SKILL.md names no scripts, command-line tools or credentials: Flexible Visual System is instructions for the agent only.

Does Flexible Visual System access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Flexible Visual System safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Flexible Visual System use?

Flexible Visual System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flexible Visual System use?

About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.8k tokens, read only when the agent opens those files.

What are the alternatives to Flexible Visual System?

Skills that share tags, products or a category with Flexible Visual System: Replica Design (Jakeschincariol/replica-skill, 1.4k stars), Webui Design (notivn/AIEV, 127 stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Design System (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Flexible Visual System?

scott-fryxell (a GitHub user) maintains it in scott-fryxell/brayness, which has 125 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on September 28, 2026.

Source: scott-fryxell/brayness on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.