mirror of
https://github.com/nexu-io/open-design.git
synced 2026-10-27 09:51:12 +01:00
b5eb8c1647
* feat: general-purpose skills with @-mention composition and user import
Lift skills from "one mode-bound skill per project" to a generic capability
the user can compose per turn:
- Daemon: scan multiple skill roots (user-skills under runtime data, then
the bundled `skills/`); user-imported skills can shadow built-ins by id.
- New `POST /api/skills/import` and `DELETE /api/skills/:id` endpoints,
with CONFLICT/BAD_REQUEST/NOT_FOUND error codes and built-in delete
protection.
- ChatRequest gains `skillIds: string[]`; the chat run concatenates each
picked skill's body (and merges craftRequires) into the system prompt
for that turn only — the project's persistent `skillId` is untouched.
- Web composer: `@` popover now lists skills alongside project files;
picks render as removable chips above the textarea and ride along with
the request as `skillIds`.
- Settings → Library: import form (name/description/triggers/body),
per-card delete for user skills, "user" origin badge.
* chore(web): drop welcome pet teaser + add ds→prompt-template mapping util
- SettingsDialog: remove the inline pet adoption teaser from the welcome
panel so the first-run modal stays focused on configuration.
- New `inferPromptTemplateCategoriesForDs(ds)` helper that maps a design
system's authored metadata to prompt-template gallery categories.
Imported by the design-system gallery wiring on a sibling branch; no
callers in this branch yet.
* feat: split skills/design-templates and add finalize-design API
Phase 0 of the skills/design-templates refactor (specs/current/
skills-and-design-templates.md):
- Move ~104 rendering catalogue entries from skills/ to design-templates/
and keep skills/ for the small set of functional skills that *do work*
on user input (utilities, briefs, packagers).
- Add design-templates/AGENTS.md and skills/AGENTS.md describing the
contract, and a brand-agnostic craft/ surface for opt-in craft rules.
- Daemon: add DESIGN_TEMPLATES_DIR / USER_DESIGN_TEMPLATES_DIR roots and
an /api/design-templates surface mirroring /api/skills. Asset/example
routes still span both registries so existing srcdoc URLs keep
resolving across the rename.
- Web: split LibrarySection into SkillsSection + DesignSystemsSection,
rename the EntryView "Examples" tab to "Templates", and update locales
+ the New-project picker accordingly.
Adds the finalize-design endpoint:
- New apps/daemon/src/finalize-design.ts and packages/contracts/src/api/
finalize.ts — one-shot synthesis of a project's transcript + active
design system + current artifact into <projectDir>/DESIGN.md via the
Anthropic Messages API. Per-project .finalize.lock mirrors the
transcript-export hygiene from PR #493; provider credentials are not
persisted by the daemon.
Other supporting changes:
- README + AGENTS.md updates to document the new directory split and
craft/ surface, plus i18n strings across 13 locales.
- Test refactors and new coverage (finalize-design, runs, sidecar
server, plus refreshed daemon integration tests).
- .gitignore: scope the *.exe ignore to /OpenDesign.exe so legitimate
vendor binaries are no longer hidden.
* fix(merge): move clinical-case-report to design-templates/
Origin/main added the clinical-case-report skill under skills/ before
the skills/design-templates split landed. Its od.mode is prototype, so
per specs/current/skills-and-design-templates.md it is a design template
and belongs alongside the other rendering catalogue entries — not under
the slimmed-down functional skills/ root. Moving it keeps the EntryView
Templates tab consistent with origin/main's intent.
* feat(skills): curated design/creative catalogue + collapsible Settings rows
Seed ~100 curated design/creative skill stubs under skills/ sourced from
awesome-claude-skills (ComposioHQ) and awesome-agent-skills (VoltAgent).
Each stub carries an od.category tag so the new filter pill row in
Settings -> Skills can group them. The seed script
(scripts/seed-curated-design-skills.ts, pnpm seed:curated-design-skills)
is idempotent: it only creates folders that don't already exist, so
hand-edited stubs are never overwritten.
- Daemon: parse and surface od.category on SkillInfo with a strict slug
normaliser; mirror the field on SkillSummary in @open-design/contracts.
Category is purely a UI hint — system-prompt composition is unchanged.
- Web: rewrite SkillsSection from a left-list / right-detail grid into a
vertical stack of collapsible rows mirroring the External MCP panel
(header always visible with name + mode/source/category pills + per-row
enable toggle; SKILL.md preview, file tree and inline edit form expand
on demand). Add a Category filter row above the list. Reorder Settings
nav so Skills + External MCP sit above the Composio/MCP cluster. Update
composer placeholder/hint across 17 locales to advertise '@ files or
skills · / for commands'.
- Docs: extend skills/AGENTS.md with the curated catalogue rules
(idempotency, category vocabulary, no upstream vendoring).
Co-authored-by: Cursor <cursoragent@cursor.com>
* test(skills): teach localized-content + system-prompt tests about the skills/design-templates split
mrcfps blocking review on PR #955: the skills/design-templates split
(b5993385) moved ~110 SKILL.md entries out of `skills/` and into
`design-templates/`, but two repo-level tests still hard-coded the
single-root layout, so CI gates went red on the merged branch:
- `e2e/tests/localized-content.test.ts` only scanned `<repo>/skills`
while the locale `skillCopy` map keeps id-keyed entries spanning
both roots (ExamplesTab/Templates uses one lookup regardless of
origin). Teach the helper to read both `skills/` and
`design-templates/`, deduplicating ids so the union matches the
localized claim.
- `apps/daemon/tests/prompts/system.test.ts` read
`skills/live-artifact/SKILL.md`, which now lives under
`design-templates/live-artifact/`. Update the absolute path so
composeSystemPrompt's coverage of the live-artifact preamble is
exercised again.
Also enroll the curated design/creative catalogue (PR #955, ~91
stubs sourced from awesome-claude-skills / awesome-agent-skills) in
the DE / FR / RU `_SKILL_IDS_WITH_EN_FALLBACK` lists. The stubs are
English-only by design (frontmatter advertises an upstream URL); the
fallback list is exactly the place to acknowledge "we know this id
exists, English copy is fine here" so the localized-content coverage
gate passes without forcing a translation task per locale.
Co-authored-by: Cursor <cursoragent@cursor.com>
* fix(skills): always quote frontmatter name so importUserSkill round-trips numeric / boolean ids
mrcfps PR #955 review: `buildSkillMarkdown` emitted `name:
${escapeYamlString(name)}` without quotes, so YAML coerced names
like `123`, `true`, `false`, or `null` into non-string scalars on
re-parse. listSkills() then read `data.name` as a number/boolean
and the import flow's follow-up `findSkillById(skills, result.id)`
missed it, falling into `/api/skills/import`'s "imported skill
could not be re-read" 500 path for those ids.
Switch the emitter to a quoted scalar (`name: "..."`) — the
double-escape already in `escapeYamlString` makes the quoted form
safe — and add a round-trip test covering `123`, `true`, `false`,
`null`, and `0` to lock in the contract.
Co-authored-by: Cursor <cursoragent@cursor.com>
* fix(web): drop staged-skill chips when the matching @<id> token leaves the draft
mrcfps PR #955 review: `submit()` always forwarded every id in
`stagedSkills`, but that state was only mutated on picker click and
chip removal. Hand-deleting an `@<id>` token from the textarea left
the chip staged, so the request still carried `skillIds: [<id>]` and
the daemon composed a skill the prompt no longer referenced.
Sync the chips with the draft inside `handleChange()` by pruning
`stagedSkills` whenever the new value no longer contains the
`@<id>` token (using the same whitespace boundary as
`removeStagedSkill`'s strip regex). Comment explains why this
prune does not run for `staged` file attachments — users frequently
add files via the upload button without leaving an `@<path>` token,
so a symmetric prune there would erase legitimate uploads.
Co-authored-by: Cursor <cursoragent@cursor.com>
* fix(daemon): stage @-composed skills' side files alongside the active skill
codex PR #955 review: composing a per-turn `@`-picked skill into the
system prompt appended its body (with the `withSkillRootPreamble`
guidance pointing at relative paths under `<cwd>/.od-skills/<folder>/`)
but never staged the actual folder. `startChatRun` only copied
`activeSkillDir`, so when the project's primary skill was different
(or absent) the composed skill's references/, examples/, and scripts/
files lived only at their absolute repo path — agents that honour
the cwd-relative form (or that don't get `--add-dir`, e.g. Codex with
allowlisted gpt-image projects) couldn't reach them.
Thread the composed skills' dirs out of `composeDaemonSystemPrompt`
as `extraSkillDirs` and stage each one through the same
`stageActiveSkill` API used for the primary skill. Dedupe by folder
basename so a project whose primary skill is also `@`-composed isn't
copied twice. Each preamble already advertises its own folder, so the
prompt and the staged tree stay aligned without further changes.
Co-authored-by: Cursor <cursoragent@cursor.com>
* fix(web): respect the Library disable toggle in the project @-mention picker
codex PR #955 review: only `EntryView` received `enabledSkills`
(filtered against `config.disabledSkills`); active projects still
got `skills={skills}` raw, so a skill the user disabled in Settings
kept appearing in the project's `@`-mention popover and could ride
along to the daemon via `skillIds`. That broke the Library toggle
for any project opened on the post-split branch.
Compute a functional-skills-only enabled subset
(`enabledFunctionalSkills`) and pass it into `<ProjectView>` instead.
Templates stay separate — design-templates are filtered through their
own `enabledDesignTemplates` memo for the Templates gallery — so
ProjectView's chat composer still only sees skills, never templates,
matching the pre-split prop surface.
Co-authored-by: Cursor <cursoragent@cursor.com>
* test(e2e): mock /api/design-templates for example-use-prompt flow
The Templates tab in EntryView fetches from /api/design-templates after
the skills/design-templates split (specs/current/skills-and-design-templates.md).
The example-use-prompt Playwright scenario only mocked /api/skills, so the
gallery card never appeared and the test timed out waiting on
example-card-warm-utility-example. Serve the same fixture summary on both
endpoints so the templates gallery renders the card the test clicks.
Co-authored-by: Cursor <cursoragent@cursor.com>
* test(tools-pack): create design-templates fixture for resources test
The packaging resources copy now bundles the new design-templates tree
alongside skills (see resources.ts BUNDLED_RESOURCE_TREES). The
copyBundledResourceTrees fixture only created skills, design-systems,
craft, etc., so the recursive copy crashed with ENOENT on
design-templates before it could check the prompt-templates assertion.
Add the missing fixture directory so the test exercises the same set
of resource trees the packaged build does.
Co-authored-by: Cursor <cursoragent@cursor.com>
* fix(skills): clone built-in side files into the shadow on first edit
mrcfps PR #955 review: editing a built-in skill wrote a USER_SKILLS_DIR
shadow folder that contained only a new SKILL.md. The next listSkills()
pass surfaced the shadow as the active dir, but every side-file resolver
(/api/skills/:id/files, /example, /assets/*, the system-prompt preamble,
and the per-turn cwd staging) reads through skill.dir. With nothing but
SKILL.md in the shadow, the bundled assets/, references/, scripts/, and
examples/ disappeared the moment the user hit save — a built-in like
last30days or live-artifact would break immediately after edit instead
of just having its body overridden.
Teach updateUserSkill() to take a `sourceDir` and clone every entry
except SKILL.md / dotfiles into the shadow on the very first edit. The
shadow stays self-contained, so all the resolvers keep working without
fallback bookkeeping. Subsequent edits detect the existing shadow and
skip the clone, so user tweaks under the side tree survive a re-save.
Wire `sourceDir: skill.dir` from server.ts's PUT /api/skills/:id handler
and add two regression tests:
- 'clones built-in side files into the shadow on the first edit' walks
the file tree after save and asserts assets/template.html, references/
notes.md, and scripts/helper.sh all round-trip from the built-in.
- 'preserves user-edited side files on subsequent edits' edits the
staged assets/template.html, re-saves, and confirms the user content
is still there.
Co-authored-by: Cursor <cursoragent@cursor.com>
* test(e2e): rename home tab from Examples to Templates
The Examples tab was renamed to Templates in EntryView (b5993385's
skills/design-templates split — entry.tabExamples became entry.tabTemplates
and the tab value moved from 'examples' to 'templates'), but
entry-chrome-flows still asserted the old label and testId. Update both.
* fix(skills+web): preserve template body in API mode and dir-based skill delete
Two follow-ups from PR #955 review:
1. ProjectView only received `enabledFunctionalSkills`, but
`composedSystemPrompt()` still resolved `project.skillId` through that
prop and `fetchSkill()`. Projects created from the new
`/api/design-templates` surface keep a template id in `project.skillId`,
so opening one in API mode dropped the template body from the system
prompt and the upstream request ran without the project's primary
template instructions. Now ProjectView takes a separate
`designTemplates` prop (the unfiltered template list, so a
later-disabled template still loads for projects already created from
it) and `composedSystemPrompt()` plus the metadata / `isDeck` lookups
fall back to that list, with `fetchDesignTemplate()` as the body-fetch
fallback to `fetchSkill()`. The chat composer's `@`-picker keeps
receiving only the enabled functional skills.
2. `DELETE /api/skills/:id` used `deleteUserSkill(USER_SKILLS_DIR, skill.id)`
which re-slugified the frontmatter id and removed
`<userSkillsDir>/<slug>/`. That matched the import shape but missed the
install shape — `installFromTarget` writes the folder at
`sanitizeRepoName(url)` (GitHub) or `path.basename(realpath)` (local
symlink), neither of which is guaranteed to equal the slugified
frontmatter `name`. A duplicate `app.delete('/api/skills/:id', ...)`
handler at the install routes never fired because Express resolved the
earlier registration first, leaving the install/uninstall path without
working teardown. The handler now removes `skill.dir` (the absolute
path listSkills already discovered) under a USER_SKILLS_DIR safety
check, using `lstat` + `unlinkSync` so symlinked local installs unlink
cleanly without recursing into the user's source tree. The dead
duplicate handler is removed; `deleteUserSkill` is dropped from the
server.ts import set (still exported and unit-tested in skills.ts).
Regression coverage in `apps/daemon/tests/skills-delete-route.test.ts`
pins both shapes plus the symlink-preserves-source case.
* test(daemon): point hyperframes system-prompt test at design-templates
The merge with main brought in a hyperframes system-prompt test that
reads `skills/hyperframes/SKILL.md`, but this branch's split moved
`hyperframes` into `design-templates/` (same migration as `live-artifact`
already handled above in this file). CI was failing with ENOENT on the
old path.
---------
Co-authored-by: Cursor <cursoragent@cursor.com>
672 lines
26 KiB
HTML
672 lines
26 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Critique · magazine-web-ppt example deck</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg: #f5f3ee;
|
||
--paper: #ffffff;
|
||
--ink: #1a1a1c;
|
||
--muted: #6b6964;
|
||
--rule: #e2dfd7;
|
||
--accent: #c96442;
|
||
--good: #4a7a3f;
|
||
--warn: #c96442;
|
||
--bad: #a83a2a;
|
||
|
||
--serif: 'Source Serif 4', Georgia, serif;
|
||
--sans: 'Inter', -apple-system, system-ui, sans-serif;
|
||
--mono: 'IBM Plex Mono', ui-monospace, monospace;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; padding: 0; }
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: var(--sans);
|
||
font-size: 16px;
|
||
line-height: 1.55;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
a { color: var(--accent); }
|
||
|
||
.wrap {
|
||
max-width: 1080px;
|
||
margin: 0 auto;
|
||
padding: 56px 40px 96px;
|
||
}
|
||
|
||
/* ============ Header ============ */
|
||
.hd {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
gap: 40px;
|
||
padding-bottom: 28px;
|
||
border-bottom: 1px solid var(--rule);
|
||
margin-bottom: 40px;
|
||
}
|
||
.hd-title {
|
||
font-family: var(--serif);
|
||
font-weight: 700;
|
||
font-size: clamp(34px, 4.4vw, 56px);
|
||
line-height: 1.05;
|
||
letter-spacing: -0.015em;
|
||
margin: 0 0 10px;
|
||
}
|
||
.hd-meta {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
display: flex;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.hd-verdict {
|
||
font-family: var(--serif);
|
||
font-style: italic;
|
||
font-size: 18px;
|
||
line-height: 1.45;
|
||
color: var(--muted);
|
||
max-width: 36ch;
|
||
text-align: right;
|
||
}
|
||
.hd-verdict strong { color: var(--ink); font-style: normal; font-weight: 600; }
|
||
|
||
/* ============ Top row: radar + score table ============ */
|
||
.top {
|
||
display: grid;
|
||
grid-template-columns: 360px 1fr;
|
||
gap: 48px;
|
||
margin-bottom: 64px;
|
||
align-items: center;
|
||
}
|
||
@media (max-width: 800px) {
|
||
.top { grid-template-columns: 1fr; }
|
||
}
|
||
.radar-card {
|
||
background: var(--paper);
|
||
border: 1px solid var(--rule);
|
||
border-radius: 6px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
}
|
||
.radar-card .lbl {
|
||
font-family: var(--mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.24em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 14px;
|
||
}
|
||
.radar-card svg { width: 100%; height: auto; max-width: 300px; }
|
||
.radar-card .overall {
|
||
font-family: var(--serif);
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
margin-top: 18px;
|
||
}
|
||
.radar-card .overall .n {
|
||
font-weight: 700;
|
||
font-size: 20px;
|
||
color: var(--ink);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
/* Score table */
|
||
.scores { display: flex; flex-direction: column; gap: 14px; }
|
||
.score-row {
|
||
display: grid;
|
||
grid-template-columns: 22ch 1fr 6ch 14ch;
|
||
gap: 16px;
|
||
align-items: center;
|
||
padding: 14px 0;
|
||
border-top: 1px solid var(--rule);
|
||
}
|
||
.score-row:first-child { border-top: 0; }
|
||
.score-name {
|
||
font-family: var(--serif);
|
||
font-weight: 600;
|
||
font-size: 17px;
|
||
}
|
||
.score-name .en {
|
||
display: block;
|
||
font-family: var(--mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
font-weight: 400;
|
||
margin-top: 2px;
|
||
}
|
||
.score-bar {
|
||
position: relative;
|
||
height: 4px;
|
||
background: var(--rule);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
.score-bar-fill {
|
||
position: absolute;
|
||
inset: 0 auto 0 0;
|
||
background: var(--ink);
|
||
}
|
||
.score-num {
|
||
font-family: var(--serif);
|
||
font-weight: 700;
|
||
font-size: 24px;
|
||
letter-spacing: -0.02em;
|
||
text-align: right;
|
||
}
|
||
.score-num .denom {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
font-weight: 400;
|
||
}
|
||
.score-band {
|
||
font-family: var(--mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
text-align: right;
|
||
}
|
||
.band-broken { color: var(--bad); }
|
||
.band-functional { color: var(--muted); }
|
||
.band-strong { color: var(--good); }
|
||
.band-exceptional { color: var(--accent); }
|
||
|
||
/* ============ Dimension cards ============ */
|
||
.section-title {
|
||
font-family: var(--serif);
|
||
font-weight: 600;
|
||
font-size: 22px;
|
||
letter-spacing: -0.005em;
|
||
margin: 64px 0 20px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
.section-title .en {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
font-weight: 400;
|
||
margin-left: 10px;
|
||
}
|
||
.dim-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
@media (max-width: 800px) {
|
||
.dim-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.dim {
|
||
background: var(--paper);
|
||
border: 1px solid var(--rule);
|
||
border-radius: 6px;
|
||
padding: 22px 24px;
|
||
}
|
||
.dim-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin-bottom: 8px;
|
||
}
|
||
.dim-name {
|
||
font-family: var(--serif);
|
||
font-weight: 600;
|
||
font-size: 19px;
|
||
}
|
||
.dim-name .en {
|
||
display: block;
|
||
font-family: var(--mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
font-weight: 400;
|
||
margin-top: 2px;
|
||
}
|
||
.dim-score {
|
||
font-family: var(--serif);
|
||
font-weight: 700;
|
||
font-size: 26px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.dim-score .denom {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
font-weight: 400;
|
||
}
|
||
.dim-evidence {
|
||
font-family: var(--serif);
|
||
font-size: 14.5px;
|
||
line-height: 1.65;
|
||
color: #2d2d30;
|
||
margin: 10px 0 16px;
|
||
}
|
||
.dim-evidence code {
|
||
font-family: var(--mono);
|
||
font-size: 0.88em;
|
||
background: var(--rule);
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
}
|
||
.dim-tags {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.tag-row {
|
||
display: grid;
|
||
grid-template-columns: 70px 1fr;
|
||
gap: 12px;
|
||
font-size: 13.5px;
|
||
line-height: 1.55;
|
||
}
|
||
.tag {
|
||
font-family: var(--mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
padding: 3px 8px;
|
||
border-radius: 3px;
|
||
color: var(--paper);
|
||
align-self: start;
|
||
text-align: center;
|
||
}
|
||
.tag-keep { background: var(--good); }
|
||
.tag-fix { background: var(--warn); }
|
||
.tag-qw { background: #2c4d6e; }
|
||
|
||
/* ============ Action lists ============ */
|
||
.lists-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
margin-top: 24px;
|
||
}
|
||
@media (max-width: 800px) {
|
||
.lists-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.list-card {
|
||
background: var(--paper);
|
||
border: 1px solid var(--rule);
|
||
border-radius: 6px;
|
||
padding: 22px 24px;
|
||
}
|
||
.list-head {
|
||
font-family: var(--mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.26em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 14px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid var(--rule);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.list-head.keep { color: var(--good); }
|
||
.list-head.fix { color: var(--warn); }
|
||
.list-head.qw { color: #2c4d6e; }
|
||
.list-head .ct {
|
||
font-size: 16px;
|
||
font-family: var(--serif);
|
||
letter-spacing: -0.01em;
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
.list-card ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.list-card li {
|
||
display: grid;
|
||
grid-template-columns: 18px 1fr;
|
||
gap: 10px;
|
||
font-family: var(--serif);
|
||
font-size: 14.5px;
|
||
line-height: 1.55;
|
||
}
|
||
.list-card li::before {
|
||
content: "";
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 3px;
|
||
border: 1.5px solid var(--rule);
|
||
margin-top: 4px;
|
||
}
|
||
.list-card li code {
|
||
font-family: var(--mono);
|
||
font-size: 0.85em;
|
||
background: var(--bg);
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* ============ Footer ============ */
|
||
.ft {
|
||
margin-top: 80px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid var(--rule);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
}
|
||
.ft .br { color: var(--ink); font-weight: 600; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
|
||
<!-- ============ Header ============ -->
|
||
<header class="hd">
|
||
<div>
|
||
<div class="hd-meta">
|
||
<span>5-Dim Critique</span>
|
||
<span>·</span>
|
||
<span>2026.04.27</span>
|
||
<span>·</span>
|
||
<span>OD · Critique skill</span>
|
||
</div>
|
||
<h1 class="hd-title">magazine-web-ppt<br>example deck</h1>
|
||
</div>
|
||
<p class="hd-verdict">
|
||
<strong>7.4 / 10 overall.</strong> Strong philosophical
|
||
backbone and detail — the deck looks like one designer made
|
||
every slide. Innovation is conservative on purpose; functionality
|
||
loses points only because the example ships without real images.
|
||
</p>
|
||
</header>
|
||
|
||
<!-- ============ Radar + Score table ============ -->
|
||
<section class="top">
|
||
<div class="radar-card">
|
||
<div class="lbl">Score Radar</div>
|
||
<!-- Pentagon radar, 5 axes; score grid at 0/2.5/5/7.5/10 -->
|
||
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" aria-label="Score radar chart">
|
||
<defs>
|
||
<style>
|
||
.axis { stroke: #e2dfd7; stroke-width: 1; fill: none; }
|
||
.grid { stroke: #e8e5dd; stroke-width: 1; fill: none; }
|
||
.grid-mid { stroke: #e2dfd7; stroke-width: 1; fill: none; }
|
||
.area { fill: rgba(201,100,66,0.18); stroke: #c96442; stroke-width: 1.6; stroke-linejoin: round; }
|
||
.dot { fill: #c96442; }
|
||
.lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; fill: #6b6964; }
|
||
.lbl-n { font-family: 'Source Serif 4', serif; font-size: 12px; font-weight: 600; fill: #1a1a1c; }
|
||
</style>
|
||
</defs>
|
||
<!-- Center 150,150. Radius 110 = 10/10. -->
|
||
<!-- Grid rings 25/50/75/100% of 110 = 27.5 / 55 / 82.5 / 110 -->
|
||
<!-- Pentagon angles: -90, -18, 54, 126, 198 (deg) measured from center.
|
||
Order: top=Philosophy, top-right=Hierarchy, bottom-right=Detail,
|
||
bottom-left=Function, top-left=Innovation -->
|
||
<!-- Outer rings (5 sided) -->
|
||
<polygon class="grid" points="150,40 254.66,116.05 214.69,238.95 85.31,238.95 45.34,116.05" />
|
||
<polygon class="grid" points="150,67.5 228.47,124.54 198.51,216.71 101.49,216.71 71.53,124.54" />
|
||
<polygon class="grid-mid" points="150,95 202.33,133.02 182.34,194.48 117.66,194.48 97.67,133.02" />
|
||
<polygon class="grid" points="150,122.5 176.16,141.51 166.17,172.24 133.83,172.24 123.84,141.51" />
|
||
<!-- Axes -->
|
||
<line class="axis" x1="150" y1="150" x2="150" y2="40" />
|
||
<line class="axis" x1="150" y1="150" x2="254.66" y2="116.05" />
|
||
<line class="axis" x1="150" y1="150" x2="214.69" y2="238.95" />
|
||
<line class="axis" x1="150" y1="150" x2="85.31" y2="238.95" />
|
||
<line class="axis" x1="150" y1="150" x2="45.34" y2="116.05" />
|
||
|
||
<!-- Score area · Phil 8 / Hier 7 / Det 8 / Func 6 / Innov 5
|
||
Distances from center (radius 110):
|
||
Phil 8 → 88 : 150, 150 - 88 = 150, 62
|
||
Hier 7 → 77 : 150 + 77*sin(72°), 150 - 77*cos(72°)
|
||
≈ 150 + 73.24, 150 - 23.79
|
||
= 223.24, 126.21
|
||
Det 8 → 88 : 150 + 88*sin(144°), 150 - 88*cos(144°)
|
||
≈ 150 + 51.72, 150 + 71.20
|
||
= 201.72, 221.20
|
||
Func 6 → 66 : 150 - 66*sin(36°), 150 + 66*cos(36°)
|
||
≈ 150 - 38.79, 150 + 53.40
|
||
= 111.21, 203.40
|
||
Innov 5 → 55 : 150 - 55*sin(108°),150 - 55*cos(108°)
|
||
≈ 150 - 52.32, 150 + 17.00
|
||
= 97.68, 167.00
|
||
Wait - cos(108°) is negative, so 150 - 55*(-0.309) = 150 + 17, that's bottom of axis. But Innov axis is top-left. Let me redo.
|
||
Innov axis end point: 45.34, 116.05. Vector from center (150,150): (-104.66, -33.95), magnitude 110.
|
||
At score 5, scale = 5/10 = 0.5: center + 0.5 * (-104.66, -33.95) = 150 - 52.33, 150 - 16.97 = 97.67, 133.03 -->
|
||
<polygon class="area" points="150,62 223.24,126.21 201.72,221.20 111.21,203.40 97.67,133.03" />
|
||
<circle class="dot" cx="150" cy="62" r="3" />
|
||
<circle class="dot" cx="223.24" cy="126.21" r="3" />
|
||
<circle class="dot" cx="201.72" cy="221.20" r="3" />
|
||
<circle class="dot" cx="111.21" cy="203.40" r="3" />
|
||
<circle class="dot" cx="97.67" cy="133.03" r="3" />
|
||
|
||
<!-- Axis labels -->
|
||
<text class="lbl" x="150" y="28" text-anchor="middle">PHILOSOPHY</text>
|
||
<text class="lbl-n" x="150" y="14" text-anchor="middle">8</text>
|
||
<text class="lbl" x="270" y="116" text-anchor="middle">HIERARCHY</text>
|
||
<text class="lbl-n" x="278" y="100" text-anchor="middle">7</text>
|
||
<text class="lbl" x="220" y="259" text-anchor="middle">DETAIL</text>
|
||
<text class="lbl-n" x="220" y="275" text-anchor="middle">8</text>
|
||
<text class="lbl" x="80" y="259" text-anchor="middle">FUNCTION</text>
|
||
<text class="lbl-n" x="80" y="275" text-anchor="middle">6</text>
|
||
<text class="lbl" x="30" y="116" text-anchor="middle">INNOVATION</text>
|
||
<text class="lbl-n" x="22" y="100" text-anchor="middle">5</text>
|
||
</svg>
|
||
<div class="overall">Overall · <span class="n">7.4</span> / 10 · band <em>Strong</em></div>
|
||
</div>
|
||
|
||
<div class="scores" aria-label="Score breakdown">
|
||
<div class="score-row">
|
||
<div class="score-name">Philosophy consistency<span class="en">Phil. cons.</span></div>
|
||
<div class="score-bar"><span class="score-bar-fill" style="width:80%"></span></div>
|
||
<div class="score-num">8<span class="denom">/10</span></div>
|
||
<div class="score-band band-strong">Strong</div>
|
||
</div>
|
||
<div class="score-row">
|
||
<div class="score-name">Visual hierarchy<span class="en">Hier.</span></div>
|
||
<div class="score-bar"><span class="score-bar-fill" style="width:70%"></span></div>
|
||
<div class="score-num">7<span class="denom">/10</span></div>
|
||
<div class="score-band band-strong">Strong</div>
|
||
</div>
|
||
<div class="score-row">
|
||
<div class="score-name">Detail execution<span class="en">Detail</span></div>
|
||
<div class="score-bar"><span class="score-bar-fill" style="width:80%"></span></div>
|
||
<div class="score-num">8<span class="denom">/10</span></div>
|
||
<div class="score-band band-strong">Strong</div>
|
||
</div>
|
||
<div class="score-row">
|
||
<div class="score-name">Functionality<span class="en">Func.</span></div>
|
||
<div class="score-bar"><span class="score-bar-fill" style="width:60%"></span></div>
|
||
<div class="score-num">6<span class="denom">/10</span></div>
|
||
<div class="score-band band-functional">Functional</div>
|
||
</div>
|
||
<div class="score-row">
|
||
<div class="score-name">Innovation<span class="en">Innov.</span></div>
|
||
<div class="score-bar"><span class="score-bar-fill" style="width:50%"></span></div>
|
||
<div class="score-num">5<span class="denom">/10</span></div>
|
||
<div class="score-band band-functional">Functional</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ Dimension cards ============ -->
|
||
<h2 class="section-title">Dimension reports<span class="en">Evidence per axis</span></h2>
|
||
|
||
<div class="dim-grid">
|
||
<article class="dim">
|
||
<div class="dim-head">
|
||
<div class="dim-name">Philosophy consistency<span class="en">Phil. cons. · 哲学一致性</span></div>
|
||
<div class="dim-score">8<span class="denom">/10</span></div>
|
||
</div>
|
||
<p class="dim-evidence">
|
||
The 9-slide rhythm reads as a single direction (Monocle Editorial)
|
||
from cover to close. <code>chrome</code> vocabulary stays in one
|
||
register: <em>"A Talk · 2026.04.22"</em>, <em>"Act II · 04 / 09"</em>,
|
||
<em>"Page 06 · 金句"</em>. The drift is the <code>kicker</code> on
|
||
slide 5 — <em>"Act II"</em> is good, but the slide title <em>"折叠"</em>
|
||
is a one-character display word that competes with the Act number for
|
||
eyeballs. Worth tightening.
|
||
</p>
|
||
<div class="dim-tags">
|
||
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>The chrome / kicker / foot vocabulary across all 9 slides — it's the deck's identity.</span></div>
|
||
<div class="tag-row"><span class="tag tag-fix">Fix</span><span>Slide 5: bump the kicker to <em>"Act II · 折叠"</em> or shrink the display title to clear the hierarchy.</span></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="dim">
|
||
<div class="dim-head">
|
||
<div class="dim-name">Visual hierarchy<span class="en">Hier. · 视觉层级</span></div>
|
||
<div class="dim-score">7<span class="denom">/10</span></div>
|
||
</div>
|
||
<p class="dim-evidence">
|
||
Hero pages (1, 5, 7, 9) are textbook — display serif dominates,
|
||
<code>kicker</code> and <code>meta-row</code> recede. Body pages
|
||
mostly hold up: stat-cards on slide 2 use <code>.stat-label</code>
|
||
(mono small) → <code>.stat-nb</code> (serif large) → <code>.stat-note</code>
|
||
(sans body), three tiers, no collision. The miss is slide 3's
|
||
<code>callout</code> — its left-rule competes visually with the
|
||
<code>.h-xl</code> heading because both sit at the same x-coord
|
||
and similar weight. Eye doesn't know if to read heading-first or
|
||
quote-first.
|
||
</p>
|
||
<div class="dim-tags">
|
||
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>Stat-card 3-tier structure on slide 2 — copy this everywhere.</span></div>
|
||
<div class="tag-row"><span class="tag tag-fix">Fix</span><span>Slide 3: indent the <code>callout</code> by <code>2vw</code> or push it below the lead so it visibly belongs to a lower tier.</span></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="dim">
|
||
<div class="dim-head">
|
||
<div class="dim-name">Detail execution<span class="en">Detail · 细节执行</span></div>
|
||
<div class="dim-score">8<span class="denom">/10</span></div>
|
||
</div>
|
||
<p class="dim-evidence">
|
||
Magazine-grade in places — every <code>.foot</code> aligns
|
||
baseline-to-baseline across all 9 slides; <code>.meta-row</code>
|
||
uses one mono spec throughout (<code>.16em</code> tracking,
|
||
uppercase). Pipeline on slide 4 keeps perfect grid even when
|
||
column count drops to 3. Two real misses: (1) Slide 3 image-slot
|
||
uses <code>aspect-ratio:16/10</code> but the placeholder text
|
||
inside is centered which makes it look hollow at viewport widths
|
||
≤ 1100px; (2) the dot-nav at the bottom overlaps the foot text
|
||
on slide 5 because the hero centered grid eats vertical space.
|
||
</p>
|
||
<div class="dim-tags">
|
||
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>The mono <code>.foot</code> spec — it's the deck's grace note, do not change letter-spacing.</span></div>
|
||
<div class="tag-row"><span class="tag tag-fix">Fix</span><span>Slide 5 hero grid: cap inner content at <code>min-height:78vh</code> so the foot stays clear of the dot-nav.</span></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="dim">
|
||
<div class="dim-head">
|
||
<div class="dim-name">Functionality<span class="en">Func. · 功能性</span></div>
|
||
<div class="dim-score">6<span class="denom">/10</span></div>
|
||
</div>
|
||
<p class="dim-evidence">
|
||
Keyboard / wheel / touch navigation works correctly inside the
|
||
host iframe (verified: ←/→/PageUp/PageDown all advance). ESC
|
||
opens the index overview, dot clicks register. Big miss is the
|
||
example ships <em>without real images</em> — slide 3 shows a
|
||
dashed <code>.img-slot</code> placeholder where a product
|
||
screenshot belongs, which is the right call for an example file
|
||
but means the user can't judge how the layout holds at full
|
||
fidelity. Second miss: <code>iframe</code> sandbox is
|
||
<code>allow-scripts</code> only in the example card, so the
|
||
WebGL background loads but the dot-nav inside the iframe takes
|
||
a click before keyboard nav captures focus.
|
||
</p>
|
||
<div class="dim-tags">
|
||
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>The 5-bug-fix nav script (real scroller detection, capture-phase listeners) — proven and stable.</span></div>
|
||
<div class="tag-row"><span class="tag tag-fix">Fix</span><span>Add a <code>data:</code> URI placeholder image (1×1 colored gradient) in the example so slide 3's layout reads at any width.</span></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="dim">
|
||
<div class="dim-head">
|
||
<div class="dim-name">Innovation<span class="en">Innov. · 创新性</span></div>
|
||
<div class="dim-score">5<span class="denom">/10</span></div>
|
||
</div>
|
||
<p class="dim-evidence">
|
||
Innovation is intentionally conservative — this is a port of
|
||
歸藏's guizang-ppt-skill, and the value proposition is
|
||
<em>predictability</em>, not novelty. The dual WebGL background
|
||
(Holographic Dispersion on dark, Spiral Vortex on light) is the
|
||
one earned moment; the cross-fade on slide-theme transitions is
|
||
subtle and well-timed. But everything else (layout vocabulary,
|
||
chrome / foot pattern, theme presets) is faithfully replicated
|
||
from the upstream. There is no "lean-forward" surprise that
|
||
makes a viewer screenshot a slide. For its declared purpose
|
||
(Monocle Editorial direction), this is appropriate. For an
|
||
AI demo-day deck, it's a missed opportunity.
|
||
</p>
|
||
<div class="dim-tags">
|
||
<div class="tag-row"><span class="tag tag-keep">Keep</span><span>The dual-shader cross-fade — it's the only "magic" the deck performs and it earns its keep.</span></div>
|
||
<div class="tag-row"><span class="tag tag-qw">Quick win</span><span>Add one <em>typographic</em> moment per deck — e.g. an oversized italic <code>em</code> kicker that breaks the grid on the closing slide.</span></div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<!-- ============ Action lists ============ -->
|
||
<h2 class="section-title">Action lists<span class="en">Keep · Fix · Quick wins</span></h2>
|
||
|
||
<div class="lists-grid">
|
||
<section class="list-card">
|
||
<div class="list-head keep"><span>Keep</span><span class="ct">don't break it</span></div>
|
||
<ul>
|
||
<li>The 9-page rhythm: <code>hero dark → light → dark → light → hero light → dark → hero dark → light → hero light</code>. It's the gold standard.</li>
|
||
<li>Dual WebGL backdrops + the <code>1.2s</code> cross-fade between dark and light slides.</li>
|
||
<li><code>chrome</code> / <code>kicker</code> / <code>foot</code> vocabulary — they carry the Monocle direction.</li>
|
||
<li>3-tier <code>stat-card</code> on slide 2 (<code>label</code> → <code>nb</code> → <code>note</code>).</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="list-card">
|
||
<div class="list-head fix"><span>Fix</span><span class="ct">P0 — visually expensive</span></div>
|
||
<ul>
|
||
<li>Slide 3 callout indent — currently competes with <code>.h-xl</code>; push 2vw right or below the lead.</li>
|
||
<li>Slide 5 hero centered grid — cap content height at <code>78vh</code> so foot doesn't overlap the dot nav.</li>
|
||
<li>Slide 3 add a <code>data:</code> gradient placeholder image so the layout reads at narrow widths even without real assets.</li>
|
||
<li>Slide 5 kicker / display: pick one to be primary — currently both fight.</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="list-card">
|
||
<div class="list-head qw"><span>Quick wins</span><span class="ct">5–15 min, high signal</span></div>
|
||
<ul>
|
||
<li>Inject <code>data-screen-label</code> on every slide for accessibility + grep self-checks.</li>
|
||
<li>Add one oversized italic <em>en</em> moment on the closing slide for typographic surprise.</li>
|
||
<li>Move the <code>#hint</code> overlay from <code>opacity:.4</code> to <code>.55</code> on hero pages — currently invisible.</li>
|
||
<li>Add a print stylesheet (one slide per page) so PDF export carries the rhythm.</li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<footer class="ft">
|
||
<span>OD · Critique skill · v0.1</span>
|
||
<span>5 dimensions · Phil / Hier / Det / Func / Innov</span>
|
||
<span class="br">github.com/alchaincyf/huashu-design</span>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|