R03 · Annual Data Report / Poster |
R09 · Business Data / Financial Dashboard |
R12 · Periodic Data Brief / Monitoring Summary |
R08 · Population / Socioeconomic One-Pager |
R01 · Research Report / One-Pager |
R05 · Project / Product Impact Story |
R10 · Personal Data / Sports / Travel Record |
R07 · Research / Market Data Collage Poster |
R02 · Annual Review / Performance Recap |
R11 · Research / Financial Brief Card |
R04 · Monthly Business / Financial Report |
R06 · Long-Cycle Product / Business Almanac |
## Quick Start
### Recommended: Use It in Moxt
[](https://moxt.ai/hub?view=skill&id=lieflat-charts)
Lieflat Charts was designed, tested, and continuously refined in [Moxt](https://moxt.ai/hub?view=skill&id=lieflat-charts). Its design rules, template structure, and file workflow were shaped through repeated use with Moxt's Agent collaboration model.
In Moxt, an Agent can more smoothly read the complete design specification, understand the visual language, apply the appropriate templates, and keep previewing and refining the result in the same workspace. This makes the Lieflat Charts design more consistent in practice.
| Lieflat Charts workflow | A typical one-shot chat | In Moxt |
|---|---|---|
| Understanding the design language | The Agent rebuilds its understanding from the Skill files | The Skill was designed and validated in the same Agent environment |
| Reading rules, templates, and data | Files or paths may need to be supplied repeatedly | Rules, templates, data, and output remain together in one workspace |
| Iterating on charts | Context may need to be explained again in a new conversation | The Agent can continue from the files and context already in the workspace |
| Producing the final result | Output may remain in a chat or temporary directory | The HTML result stays beside its data and templates for further refinement |
Lieflat Charts still works with other tools that support Agent Skills. Moxt is its native production environment and the recommended path for the most complete workflow with the fewest setup steps.
### Install in Other Agents
Install with one command:
```bash
npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts
```
You can also send the following instruction to an AI agent with shell access:
```text
Install lieflat-charts. Clone https://github.com/larashero3-dotcom/lieflat-charts
to ~/.claude/skills/lieflat-charts, then verify that SKILL.md, templates/,
catalog.md, and mono-tokens.js are present.
```
For Codex, replace the installation path with `~/.codex/skills/lieflat-charts`.
To update an existing installation:
```text
Update lieflat-charts. Enter ~/.claude/skills/lieflat-charts, run git pull,
and report the latest commit.
```
After installation, ask your agent:
```text
Turn this research dataset into five charts for a long-form article.
Compare Lupi Editorial and Lupi Basics first. Use Glance only if neither group fits.
```
More prompt examples:
```text
Use lieflat-charts to turn this dataset into a color chart.
```
```text
Read this paper, identify the strongest data findings, and build a complete HTML chart page.
```
```text
This is weekly reporting data. Make the ranking, changes, and anomalies readable within ten seconds.
```
```text
Turn this CSV into a Glance chart suitable for a presentation.
```
```text
Redesign this dataset in the Lupi style, preserving every real record and adding useful annotations.
```
```text
Rebuild this chart with the Porcelain preset. Use lightness to represent value without changing the structure.
```
The number of charts follows the number of independent findings: one chart for one question, two or three charts for two or three findings, and four to six charts for a complete article or paper. A single page defaults to no more than six charts, and repeated conclusions are removed rather than added to meet a quota.
## Templates
| Family | Count | Best for | Implementation |
|---|---:|---|---|
| **Lupi Editorial** | 15 | Annual reports, papers, long-form articles, posters, portfolios, and readers willing to inspect detail | Handwritten SVG |
| **Lupi Basics** | 13 | Bars, lines, areas, donuts, scatterplots, waterfalls, heatmaps, progress, treemaps, and other foundational data shapes | Handwritten SVG / ECharts |
| **Glance** | 18 | Weekly reports, dashboards, monitoring, and presentations that require fast comparison | Chart.js / ECharts |
| **Interactive** | 3 | Networks, paths, multi-segment flows, and high-density relationship data | ECharts / SVG |
| **Color Presets** | 3 families / 15 samples | Distinguishing real data dimensions or adding one controlled focal point to monochrome charts | Restyled original templates |
| **Report Templates** | 12 templates / two languages | Research, annual, monthly, dashboard, poster, brief, and notebook-style full-page reports | Single-file HTML |
### Lupi Editorial
Each point, line, and annotation should map to a real unit whenever possible. Lupi Editorial does not rush to aggregate the evidence into a single number. It lays out records, distributions, structures, and exceptions through hairlines, whitespace, ledger-like guides, annotations, and low-contrast value scales.
### Lupi Basics
Lupi Basics retains familiar chart silhouettes while rebuilding them inside the same editorial language. A cell can represent one percentage point, a tick can represent one person, a hairline can represent one day, and a treemap rectangle can represent one honest weight. It is suited to smaller datasets that still need density and countable visual units.
### Glance
Glance pre-aggregates information, strengthens the main forms, and places the key ranking or change in the first visual pass. It is not a simplified Lupi mode. It serves a different reading speed: readers can identify what is higher, what changed most, and what needs attention within seconds.
### Interactive
Interactive templates handle relationship data that ordinary static charts cannot carry. Hover, focus, dragging, pinned paths, and status readouts turn complex networks into records that can be queried one by one. Interaction is reserved for real data, not decorative elements.
## Design
Every family shares the same core visual language: paper gray and charcoal at the extremes, a controlled grayscale ladder between them, and data encoded through lightness, position, length, density, and structure. The three color presets provide stable starting points. Explicit brand colors can also become one role-based custom palette. When users refine the palette, contrast, hierarchy, and data meaning still need to remain clear.
Lieflat Charts differs from a conventional chart generator in more than color:
- It identifies the data contract before choosing a chart.
- Each chart carries one independent conclusion before charts are assembled into a page.
- Real data units become visual atoms instead of using decorative noise to imitate density.
- Headlines, annotations, sources, spacing, and motion are treated as part of the chart.
- Lupi and Glance represent different reading speeds, not simply static versus interactive output.
## Structure
```text
.
├── README.md # Chinese project guide
├── README.en.md # English project guide
├── SKILL.md # Agent workflow and design rules
├── catalog.md # Data-contract index for 49 chart types
├── report-catalog.md # Scenario index for 12 report templates
├── mono-tokens.js # Shared monochrome design tokens
├── color-presets.js # Three built-in color presets
├── templates/ # Lupi, Basics, Glance, interactive, and report templates
│ ├── color/ # Color-restyled samples
│ └── reports/ # 12 report templates, each in Chinese and English
├── examples/ # Examples based on public datasets
├── docs/assets/ # README screenshots and motion previews
└── scripts/validate.mjs # Pre-release validation
```
Open the HTML files under `templates/` directly to inspect the galleries. Open `templates/reports/index.html` to browse the report templates and their Chinese/English variants. Report mode chooses a full-page skeleton from `report-catalog.md`, then reuses the real chart implementations indexed in `catalog.md` for each chart slot. Lupi and Basics mainly use native SVG, while F13 Treemap uses ECharts. Glance, Circular, Force, and report templates R11/R12 also load Chart.js or ECharts from a CDN and require an internet connection unless those dependencies are inlined.
## License
This project is licensed under the [PolyForm Noncommercial License 1.0.0](LICENSE). Learning, modification, sharing, and noncommercial use are allowed. Commercial use requires separate permission.
Chart.js, Apache ECharts, and the Inter typeface remain subject to their original licenses. See [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).
