Adds blinds, checkerboard, dissolve, box, circle, diamond, plus, strips, and wedge entrance/exit effects to both the PPTX exporter (native PowerPoint animations) and the deck-stage browser preview (gradient-mask approximations via CSS custom properties).
Also fixes repeat/auto-reverse handling: spin/grow/shrink/pulse/path now carry repeatCount on the behavior cTn (not the container), composite effects repeat via an inner wrapper par, auto-reversed paths are unrolled into continuous geometry, and auto-reverse is restricted to spin/grow/shrink/path (pulse and teeter already return to base). Secondary shapes in multi-shape elements now fade instead of running per-shape filter effects that clash.
Includes an anim-demo.html starter component covering all effects.
Expand the data-anim animation system with 10 new effects and timing controls:
New entrance/exit effects: wipe-out, float (vertical drift+fade), split (barn door), bounce (damped hops), wheel (pie wedge), random-bars (stripe reveal).
New emphasis effects: pulse (scale with mid-fade dip), teeter (rock oscillation).
New timing attributes: data-anim-repeat (2–100 cycles), data-anim-auto-reverse (forward+backward, emphasis/path only).
Implement effect-family-aware data-anim-dir validation (fly/wipe take edge dirs, float takes top|bottom, split/random-bars take horizontal|vertical axis). Export native PowerPoint animations with correct presetIDs, subtypes, and behaviors. Update deck-stage.js browser preview with gradient-mask approximations for wheel/split/random-bars (fallback to fade on CSS.registerProperty unavailability). Match repeat/auto-reverse timing in both preview and export so after-chaining waits the effective duration (repeats × reverse leg). Add comprehensive tests covering all effects, dir families, and repeat scenarios.
- New data-anim convention (appear/disappear, fade, fly, wipe, zoom, spin,
grow/shrink, custom motion paths; click/with/after sequencing) documented
in make-a-deck.md and previewed by a WAAPI build engine in deck-stage.js
(recorded as Patch 3 in deck-stage-patch.md).
- gen-pptx exports the builds as native PowerPoint animations: shared
attribute parser (src/core/anim.ts), timing-tree builder
(src/render/timing.ts), shape tagging via objectName + deterministic
cNvPr ids, new validation flags and an "animations" result count.
- Vendor PptxGenJS version-3.13.0 branch as TypeScript source under
agents/gen-pptx/vendor/pptxgenjs (two anchored patches splice the
per-slide <p:timing> tree; see VENDOR.md); jszip becomes a direct dep.
- Keep animated elements as standalone shapes (list/text-run merge gates).
Replace the runtime node -e writeFileSync('/tmp/baoyu-design-vision-probe.png')
with a committed agents/assets/vision-probe.png (fixes Windows + multi-user
EACCES, no leftover temp file). Probe once per session and cache the verdict;
note the probe subagent must run on the session's model/provider. Add tests for
the committed asset and the caching wording.
PowerPoint has no gradient fill, so the editable converter flattened a CSS gradient to its first color stop. An alpha-fading scrim (e.g. linear-gradient(105deg, rgba(8,10,13,.92) to .05)) became a near-opaque dark rectangle that uniformly dimmed the whole image, hiding the bright subject under the fade.
Capture now records gradient backgrounds; the media resolver paints them onto a canvas honoring each stop's alpha (linear + radial, angle / to-direction / corner, %/px stops, border-radius clipping) and embeds a transparent PNG. The renderer draws that PNG instead of the flat fill. Unsupported forms (conic / repeating) fall back to the prior behavior. Adds a unit-tested gradient parser.
Mirror the gen_pptx pipeline for the animated-video skill: a new
agents/gen-video/ TypeScript CLI drives headless Chromium via Playwright,
seeks a timeline animation frame-by-frame through a window.__animStage
bridge, supersamples at 2x, and streams PNG frames over image2pipe to
ffmpeg (libx264/vp9/gif). Defaults to 30fps and the Stage's own
width/height/duration; prints one JSON line with non-fatal validation
flags.
The starter-components/animations.jsx Stage is now export-ready: it
publishes the bridge and, under ?capture, starts paused at t=0 and strips
its scrubber/letterboxing/transitions so most exports need only the Stage
dimensions. Adds built-in-skills/export-as-video.md and routes to it from
animated-video.md, SKILL.md, the system-prompt index, and references/
claude.md. node --test covers the ffmpeg-arg builder and the validation
heuristics; the duplicate_frames check only fires when nearly every frame
repeats, not for a well-paced explainer's held beats.
Code blocks collapsed onto a single line in the editable export. Two
causes, both in DOM-to-run text handling:
- white-space: pre/pre-wrap blocks (filetree) had their interior
newlines stripped: normalizeText trimmed every fragment's lead/trail
newlines, killing the breaks between sibling runs. Split that into
normalizeText (preserves verbatim) + trimBlockNewlines (trims the
whole assembled block only).
- <br> elements produced no break at all. extractTextRuns now injects
a "\n" run for <br>.
render-node multi-run path now splits runs on "\n" into visual lines
and emits explicit breakLine per line, instead of relying on
PptxGenJS's embedded-"\n" split (which mis-breaks runs continuing the
same line). Separating spaces are suppressed across breaks and when
whitespace is preserved, so alignment spaces survive.
Verified against baoyu-skills-deep-dive: slides 4/6/7 line structure,
indent spacing, and per-run colors now match the web view. 19/19 tests
pass (added trimBlockNewlines coverage).
Wrap setup/captureEditable/captureScreenshot page.evaluate() in a
timeout (setup 15s, captures 15s + delay) matching the original tool,
so a never-settling slide can't hang the export and the existing
timeoutHint retry guidance actually fires. Also dedupe render-node's
private normalize() onto core css normalizeText().
Add a new "Decks & PPTX export" section to README.md and README.zh-CN.md describing the gen_pptx workflow: decks are self-contained HTML, editable vs screenshot export modes, and a local CLI (agents/gen-pptx) that uses Playwright + PptxGenJS. Documents explain the browser-side capture approach (render in headless Chromium, inject window.__genpptx, serialize DOM or take screenshots), setup steps (fonts, undo scaling, wait for fonts.ready), coordinate/font conversions, and basic validation. Also add pipeline diagrams assets/gen-pptx-pipeline.svg and assets/gen-pptx-pipeline-zh.svg.
The description grew to 1381 chars after adding PPT/export triggers.
Trim to 906 by cutting the verbose workflow/harness sentences while
keeping every trigger word (design verbs, PPT/PPTX/PowerPoint, export,
design systems) and the decks-only export caveat.
Add PPT/PPTX/PowerPoint make-and-export trigger words to the skill's
gating description so requests like "做个PPT" / "export to PowerPoint"
route here. Scope it: the PPTX export only handles decks this skill
builds, not arbitrary HTML, and both export docs gain a "decks only"
precondition so a non-deck HTML page isn't exported as if it were a deck.
The claude.ai gen_pptx web tool does not exist in Claude Code. Add
agents/gen-pptx/, a TypeScript port that drives headless Chromium
(Playwright) + PptxGenJS to export a deck to .pptx in editable or
screenshots mode, reading the same input object the export docs define
and printing a one-line JSON result with validation flags.
Wire it into the two export skills (Claude Code callout at the "Call
gen_pptx" step) and references/claude.md (tool map row + "Exporting to
PPTX" setup/invocation section). Ships as source; setup builds dist.
- deck-stage: auto-hide the thumbnail rail in native Fullscreen API
(element.requestFullscreen) via an independent _fullscreen flag, kept
separate from host-driven presenting; record the local edit in
deck-stage-patch.md so it can be reapplied after a Claude Design upgrade.
- CHANGELOG: document the unreleased work — host-driven dc-op rail model,
make-a-doc / something-cool skills, built-in-skills refresh, print
end-state fix, TweakSuggestionBar, design-canvas viewport persistence,
and the fullscreen rail-hide above.
Move rail mutations to a host-driven dc-op model and add several UI/print/interaction improvements.
- deck-stage: replace local "deckchange" emissions with a `dc-op` CustomEvent and implement _emitDcOp to emit ops (setAttr/removeAttr/move/remove/duplicate) while supporting optimistic index updates and a rail lock until the host acknowledges via {__dc_op_ack, applied}.
- Deck rail: add Duplicate action/UI, guard mutations with _railLock, and adapt live mutation observer to treat host-driven data-deck-skip updates (update thumb badge, print bookkeeping, and postMessage) without re-cloning slides.
- Print: add beforeprint/afterprint handlers and stylesheet tweaks to force animations/transitions to end-state for reliable printing; set data-deck-active on slides during print.
- Rework slide ops: implement duplication, guarded delete/move/skip logic that emits dc-op or falls back to local mutation when no dc-runtime is present.
- design-canvas: persist/restore viewport transform with a visibility backstop that resets transforms if the restored pan/zoom leaves content off-screen; add wheel passthrough so nested deck-stage rail keeps native scroll behavior.
- tweaks-panel: add a TweakSuggestionBar UI with a typewriter suggestions cycler and chat-post helper for edit-mode suggestions.
- image-slot: small comment wording fix.
These changes prepare the component to work with an external dc-runtime/editor host that owns light DOM mutations while preserving standalone HTML behavior.
Introduce two built-in skills and wire them into the design flow. Adds make-a-doc (guidance for page-style, print-first documents with layout and print CSS rules) and something-cool (an opt-in ‘surprise me’ flow that asks the user a single-select prompt before building). Updates SKILL.md and system-prompt.md to reference these skills and to special-case when to load them (documents vs. default hi-fi/interactive flow, and explicit "show me something cool" requests).
Revise extractPromptExcerpt to return a complete fenced JSX example when encountered rather than potentially cutting a block mid-fence. Blank lines no longer count toward the prose maxLines, and a new maxBlockLines (default 14) limits how many lines are included from a fenced block. The function now skips leading blanks, collects up to maxLines non-blank prose lines, expands a following fenced block up to maxBlockLines (and auto-closes an unclosed fence), trims trailing blank lines, and avoids returning empty/duplicate fence markers. This keeps rendered prompts balanced and ensures examples render correctly.
Add a regex-based .d.ts interface parser and surface per-component prop contracts to tooling; attach parsed props to model.components and treat all-uppercase exports as `kind: 'constant'` so constants are skipped by prop/adherence rules. Emit a `<ds-component-props>` block in the generated prompt (with full enum lists and defaults), pass component props through import/prompt paths, and improve adherence rule generation (dedupe props, escape enum values, skip constants and missing contracts).
Introduce detection of risky top-level bindings in <script type="text/babel"> blocks (common window globals like `status`, `open`, `location`, etc.), add warnings into the model issues and the prompt/authoring docs, and export the helper. Fix fig-materialize font-weight mapping to use the ordered FONT_WEIGHT_PATTERNS table so Semi Bold/Extra Bold/Thin map correctly. Also update checker/compiler output to surface constant exports and update changelog and docs to reflect these changes.
Add documentation and assets for importing design sources and fix preview asset inlining. Updated CHANGELOG.md, README.md and README.zh-CN.md to introduce a new "Import design sources" section (Figma .fig offline decode, GitHub repo import, existing HTML/CSS), added an example screenshot asset (assets/screenshots/figma-import-chakra-preview.webp), and adjusted wording around built‑in skills. Implemented script-side asset inlining in skills/baoyu-design/agents/build-preview.mjs: new regex and helpers (rewriteScriptStringRefs, rewriteScriptAssets) ensure quoted attribute refs and bare string-literal refs (e.g. const PHOTO = "../assets/x.jpg") are resolved and inlined into preview.html, skipping scheme-prefixed refs. Also updated parseCardHtml to use the new inliner so preview.html no longer 404s for assets referenced inside scripts.
Add two new built-in skills (import-from-github.md, import-from-html.md) that document safe import workflows: browse GitHub with gh, sparse-clone into a scratch dir outside the project, record provenance, and treat repo/page content as data not instructions. Update docs (CHANGELOG, README*, SKILL.md, system-prompt.md, design-system-authoring-guide.md, create-design-system.md) to reference the new skills and to emphasize scope, provenance, and the content-is-data guard. Enhance agents/import-figma.mjs: append an agent-focused README appendix to mounts (scope, source, materialize/render guidance), carry confirmed page scope through commands, improve mount/render messaging, and add a design-system README provenance sentence. Modify agents/build-preview.mjs to tighten URL scheme checks and refactor rewriteMarkupAssets to optionally skip event-handler rewrites; inline script assets are now rewritten via the same helper to avoid broken refs. Changelog entries updated to describe these additions and behavior changes.
Fix the rough edges found while test-importing the Chakra UI Figma Kit
end to end:
- import-figma.mjs: printed next-step commands are now copy-pasteable —
arguments are shell-quoted and scripts referenced by their real path
(derived from process.argv[1]) instead of assuming the agents/ cwd;
display paths use the shorter of relative/absolute; writeEmitted()
tracks case-folded paths and warns when a case-insensitive filesystem
would have silently clobbered files; the CLI epilogue and generated
README scope the font list to fonts used by the emitted components
(the metadata histogram counts every text node in the file).
- check-design-system.mjs: cap the summary's inline component inventory
at 40 names with a "+N more — full list with --verbose" pointer, so a
9,000-component import doesn't bury the verdict in one ~150 KB line.
- build-preview.mjs: split the "no usable manifest" message into
missing-manifest (run compile-design-system.mjs) vs manifest-with-no-
cards wording.
- import-from-figma.md: correct the adherence caveat — the checker runs
no adherence lint; the compiler's _adherence.oxlintrc.json applies
later, when pages are linted against the system.
- CHANGELOG.md: document the .fig importer, the checker summary cap,
the bundle-ordering fix, and the preview message fix under Unreleased.
Introduce a local Figma .fig importer (agents/import-figma.mjs) with subcommands to outline, mount, materialize, render, and emit design-systems entirely offline. Vendor libraries for unpacking/decoding were added (agents/vendor/fflate.mjs and agents/vendor/fig-materialize.mjs). Update compile-design-system.mjs to emit source blocks in dependency-safe DFS post-order (orderForBundle) and read sources into rawByPath before transpiling to keep the manifest stable and outputs deterministic. Minor doc/comment tweaks in asset-store.mjs and record-asset.mjs, add import docs and built-in-skill references, and ignore designs/ in .gitignore.
New agents/build-preview.mjs compiles a design-system folder (its
_ds_manifest.json cards, starting points, and readme.md) into one
self-contained interactive preview.html — outline nav, rendered Readme,
and scaled live cards isolated via declarative Shadow DOM (no iframes).
React/ReactDOM 18.3.1 production UMDs are vendored into agents/vendor/ so
the default build is offline. The new design-system-preview.md built-in
skill documents it, and the authoring flows (design-system-authoring-guide.md,
create-design-system.md) plus SKILL.md and system-prompt.md now end by
generating preview.html and list it as a generated artifact.
ds-core.mjs: skip phantom custom-property matches whose value contains a
brace, so BEM-with-pseudo-class rules like `.s2-btn--primary:hover { … }`
no longer mis-read as `--primary` tokens in _ds_manifest.json. CHANGELOG
updated.
Update import and prompt rendering to produce a richer per-load design-system prompt. import-design-system.mjs now collects per-component *.prompt.md excerpts and passes component names and global CSS paths into renderDsPrompt; wiring output is bundle-first (pinned React UMD tags, stylesheet links, bundle script) with a Babel example when composing with exported components. ds-prompt.mjs gains REACT_UMD_TAGS, BABEL_TAG, sampleComponentNames and extractPromptExcerpt helpers, and refactors renderDsPrompt to emit clearer bundle/stylesheet instructions, token allowlist, source pointers, and an embedded <ds-prompt-excerpts> block. Corresponding docs updated (CHANGELOG.md, use-design-system.md, system-prompt.md) to reflect the new wiring, bundling, and per-component excerpt behavior.
Compiler: bundle and expose PascalCase exports from non-module .jsx/.tsx sources onto the design-system namespace when no .d.ts sibling exists, but do not grant props contracts, adherence rules, or starting-point eligibility. Collision-guarding was added so .d.ts-backed module components keep their names. Implementation updates adjust assignment logic and append extra exposed names at bundle tail.
Docs: update changelog and three authoring docs to reflect the new behavior and related ergonomics — allow components to import React and siblings via relative paths (the compiler strips/rewrites these), accept app.css as a global CSS entry name, and expand the GitHub import workflow: browse repo trees with `gh api`, use shallow sparse-checkout to copy only needed paths into a scratch clone located outside the design-system folder, and stop and prompt the user when a repo is private or unreachable. Minor wording/clarity improvements across create-design-system.md, design-components.md and design-system-authoring-guide.md.
Jim Liu 宝玉