Misaki Studio's design system stores reusable visual and media decisions in project files. Components refer to stable token IDs instead of repeating raw values, so a token can be renamed, themed, shared through a Library, and exported consistently.
Fixed file: design-system/colors · Stores: Primitive, semantic, and alias color tokens, including supported gradients. · Theme/layer support: Semantic values can vary; Primitive and Alias values do not.
Fixed file: design-system/fonts · Stores: Font types/uploads and typography templates. · Theme/layer support: Templates can vary; base Types do not.
Fixed file: design-system/images · Stores: SVG/image Types and reusable Templates. · Theme/layer support: Templates can vary; base Types do not.
Fixed file: design-system/spacing · Stores: Numeric spacing tokens. · Theme/layer support: No.
Fixed file: design-system/radius · Stores: Numeric corner-radius tokens. · Theme/layer support: No.
Fixed file: design-system/audios · Stores: Uploaded or externally hosted audio references. · Theme/layer support: No.
Fixed file: design-system/videos · Stores: Externally hosted video metadata and poster references. · Theme/layer support: No.
Fixed file: design-system/themes · Stores: Theme names, paths, and the protected Default theme. · Theme/layer support: Defines the contexts; values live in their owning token files.
design-system/font-weight is a compatibility/incomplete token surface. The file kind exists, but a default project does not create it, its inspector coverage differs, and there is no dedicated add/update MCP tool. Do not plan a new public workflow around it yet.
The design-system Images file is not the same as an ordinary project file below images/. design-system/images is the token registry used by Components and video posters; images/* is an Image collection file with a different model and limited MCP coverage.
The exact categories depend on the file:
A color Primitive owns a concrete solid, linear-gradient, or radial-gradient value.
A color Semantic or Alias can refer to another color token and resolve through that reference. Only the Semantic tab exposes theme/layer cells.
Font and image Types own the underlying family/file or SVG/image source.
Font and image Templates provide reusable, theme-aware choices built from those Types.
In the current Colors UI, the visible tabs are PRIMITIVE, SEMATIC, and ALIAS. “SEMATIC” is the product's current spelling; documentation keeps the exact label so readers can find it.
Use semantic names for product intent—such as a surface, text, or accent role—and primitives for the raw palette. Reference chains must still resolve to a valid final token; a loop or missing reference cannot produce a usable style.
Every project has a protected Default theme. Additional Theme rows hold a name and path. The actual value for a themed semantic color, font template, or image template remains in that token's own file, keyed by theme and layer.
Theme resolution follows the ordered theme chain up to the selected theme. Layer values resolve within that context, with supported layers numbered 1 through 4. A token without a value in the current theme/layer can inherit the nearest available earlier value rather than requiring every cell to be repeated.
Generated output provides theme CSS variables and a ThemesLayer context that carries the selected theme and layer. The application integrating the output must mount and control that context correctly; seeing a theme in the editor does not configure an external application's theme switcher by itself.
Open the fixed design-system file from Files.
Choose its category tab when it has one.
Add a Section to preserve meaningful grouping in the editor and generated helper paths.
Add the primitive Type or base item before adding a reference or Template.
Select the token and edit its value in Props.
For a theme-aware token, choose the intended Theme and Layer before changing the value.
Apply the token to a Component element and preview representative themes.
Inspect generated output and copied assets before shipping.
The selected token, tab, theme, layer, and scroll position are editor view state. Token names, sections, sources, references, and theme-specific cells are project content.
Supported Design controls can store a design-system token reference instead of a raw CSS value. The editor resolves that reference for the current theme and layer; generated styles use the corresponding exported variable or helper.
Prefer tokens for repeated product decisions. A one-off illustration size or layout experiment can remain a local value until it becomes a stable system decision. Turning every number into a token makes the registry harder to understand without improving consistency.
Coverage: UI + MCP for stored design-system content; Partial MCP for visible selection and uploaded local media.
Select the Website project and read its design-system registry. Summarize Colors, Fonts, Images, Spacing, Radius, Themes, Audios, and Videos by section and token name. Identify missing references, empty media sources, and duplicated or ambiguous generated names. Do not add, rename, delete, upload, or change any token.
The agent can use design-system-get and current diagnostics. For a mutation, use the dedicated file family—for example colors-file-add-color, fonts-file-add-template, spacing-file-update-size, or themes-file-update-theme—then read the registry and affected Component style back.
In the Website project, inspect
design-system/colorsand find<semantic token>. Preserve its name and reference structure. Change only its value for<theme>at layer<1-4>, read the resolved token back, then preview<component reference>in that same theme. Do not change the primitive palette or any other theme cell.
An agent should use current token and theme IDs returned by the read operation. It must not guess an ID from the visible name.
A linked project Library can provide Components and design-system tokens to the current project. The consumer treats Library content as foreign/read-only source and exports supported foreign token definitions with namespaced identifiers.
Edit a Library token in the project that owns it, then update and verify the consuming project. Copying only a visual file without its dependencies can leave token references unresolved or replaced by fallback values.
Audio can use an uploaded project blob or an external URL. Component actions and timeline audio segments refer to its stable token ID.
Video is external-URL metadata with an optional poster from design-system/images; video uploads are not supported.
The current implementation has no canvas Video node, so the Video registry is not yet a drag-and-drop video component surface.
Uploaded fonts, images, and audio depend on their project blobs being copied into exported assets.
External URLs, browser CORS policy, availability, and byte-range support remain responsibilities of the hosted media source.
Read the token, reference, theme, and layer back.
Preview more than one consuming Component and every affected theme.
Check fallback behavior for themes that do not override the token.
Inspect generated CSS/helpers and the exported asset folder.
Run diagnostics for duplicate generated names and missing dependencies.
Confirm Undo reverts the token content change as one user action.
Token, section, theme, and reference mutations are persisted and undoable within their owning file. Uploading media also creates an external project blob; removing or undoing the reference does not imply that every copied/exported asset or hosted URL is recovered automatically.
Changing or deleting a widely used token can affect many Components and generated files. Inspect dependants before removal and use source control for exported output.
Design-system files are fixed/protected project locations, not ordinary files to rename or move.
Theme metadata and themed token values live in different files.
Cyclic, missing, or incompatible references cannot resolve correctly.
Duplicate names that generate the same TypeScript/CSS key can collide or produce diagnostics.
Font-weight is currently an incomplete compatibility surface.
Video tokens do not currently render through a native canvas Video node.
Source verification confirms mechanisms; these token-editing workflows still need runtime verification before website synchronization.