Install and use · Baseline 0.4
Skip to content
Baseline 0.4 Install and use

Connect Baseline to Claude in three steps.

Download the folder, connect it to Claude Design, Claude Code or the Claude app, and ask for a sheet. Section 01 shows how. Section 02 is written for Claude itself.

01

Connect Baseline to Claude

  1. 1
    Download the Baseline folder
    One zip, 135 files: the rules, tokens, fonts, component bundle and the three examples. Unzip it once and keep the folder whole.Download Baseline 0.4ZIP · 1.4 MB
  2. 2
    Connect it to the Claude you use
    Pick one of the three below. Each takes about a minute.
  3. 3
    Ask for a sheet in plain words
    For example: “Make a Baseline sheet showing which districts started the most housing in 2022.”
Claude Design
For designing sheets, dashboards and slides.
  1. a
    Open your project
  2. b
    Choose the design system and pick Baseline
    If Baseline is not listed yet, upload the folder as a new design system first.
  3. c
    Describe what you want
    Claude reads Baseline’s rules by itself.
Claude Code
For building real pages in a code project. Or skip the steps: paste the prompt from section 02 and Claude Code installs it.
  1. a
    Copy the folder into your project
    For example to design/baseline/.
  2. b
    Open CLAUDE.md in your project
    Create it at the project root if it does not exist.
  3. c
    Paste the snippet below and save
    Every session will now start from Baseline’s rules.
Claude app
For quick questions and one-off figures in chat.
  1. a
    Create a Project
  2. b
    Add SYSTEM.md and design-rules.json to its knowledge
  3. c
    Paste the snippet below into the project instructions
    Then chat inside that project.
CLAUDE.md snippet
## Design system: Baseline 0.4

All UI, reports and figures use Baseline, at design/baseline/.
- Read design/baseline/SYSTEM.md first and treat it as sufficient.
- Open a component's <Name>.prompt.md only after choosing it; at most three per task.
- Never open _ds_bundle.js, *.jsx, support.js, *.card.html or vendor/.
- Link styles.css only. Load Lucide before the bundle; call lucide.createIcons() after mount.
- Four colours: ground, ink, accent, signal. Accent marks one thing, under 4% of a surface.
- Square corners, no shadows, no gradients. Type never below 11px.
- Panels are fixed 16:10, fitting the screen. Copy the closest page in examples/ before starting.
- Every heading states a finding; every figure caption states what, when and n.
Change design/baseline/ to wherever you put the folder. In the Claude app, delete that path; the files are already attached.
Building a page by hand instead
Keep the folder next to your page, link styles.css only, load the scripts in this order, and call lucide.createIcons() after the page mounts.
Minimal page, standalone
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My sheet</title>
  <link rel="stylesheet" href="styles.css">
  <script src="vendor/react.production.min.js"></script>
  <script src="vendor/react-dom.production.min.js"></script>
  <script src="vendor/babel.min.js"></script>
  <script src="vendor/d3.min.js"></script>              <!-- figures only -->
  <script src="vendor/topojson-client.min.js"></script> <!-- geography only -->
  <script src="vendor/lucide.min.js"></script>
  <script src="_ds_bundle.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { Stat } = window.DesignSystem_dccb1c;
    function Page() { return <Stat label="Total" value="507.0" unit="GW" />; }
    ReactDOM.createRoot(document.getElementById("root")).render(<Page />);
    window.lucide.createIcons({ attrs: { "stroke-width": 1.5 } });
  </script>
</body>
</html>
02

For Claude agents

Read SKILL.md, then SYSTEM.md, and treat SYSTEM.md as sufficient. Open a component’s .prompt.md only after choosing it, at most three per task. Copy the closest page in examples/ before starting a panel.
Install it yourself, in Claude Code
Claude Code can fetch and unzip the system on its own. Give it the prompt, or run the commands. Either way the system lands in .claude/skills/baseline/, where SKILL.md is picked up as a skill. Claude Design and the Claude app cannot install from a link; a person connects them, as in section 01.
Prompt for Claude Code
Install the Baseline design system from https://shulik.online/llms.txt into this project as a skill, then confirm SKILL.md is readable.
Or run it in a shell
mkdir -p .claude/skills
curl -fsSL https://shulik.online/baseline-0.4.zip -o /tmp/baseline-0.4.zip
unzip -q -o /tmp/baseline-0.4.zip -d /tmp/baseline-0.4-unzip
rm -rf .claude/skills/baseline && mv /tmp/baseline-0.4-unzip/baseline-0.4 .claude/skills/baseline
Files an agent never opens
The system is several context windows of text on disk. Almost all of it is implementation that cannot change what gets built. Running out of context is the most common way work with Baseline goes wrong.
{{ f.file }}{{ f.why }}
03

Before a page ships

{{ c }}