feat(ui-designer): replace open-design vendored prototypes with first-party preview app#14
Merged
Merged
Conversation
…-party preview app
Drop the inherited resources/open-design/themis-app/ vendored prototypes and
the themis-design-system skill. Both pointed at a third --tm-* palette that
drifted from the Catalyst Tailwind v4 token set now used by the Angular app
and the Astro site.
Add apps/web/ui-designer, a Node + Express + esbuild preview server that
reuses styles.base.css, ships one seed prototype (app-auth-shell), and
exposes GET /, GET /preview/:slug, GET /preview/:slug/frame, GET
/api/prototypes, GET /healthz. Targets: lint, build (esbuild), build-css
(tailwindcss CLI + asset copy), serve (Node continuous watch). Default port
4300, env-overridable. Server reads prototypes from a kebab-slug-safe
allowlist and serves the iframe at /preview/:slug/frame?theme=light|dark.
Only Node is supported (Bun intentionally out of scope per workspace
uniformity).
Install two upstream open-design skills to replace what themis-design-system
provided: impeccable-design-polish, login-flow. Each ships THEMIS_NOTES.md
describing the upstream pin and Themis-specific guidance. The open-design
brand-guidelines skill is intentionally NOT vendored: it points at
Anthropic's brand assets which Themis does not use. The Themis brand
contracts live in docs/design-system/tokens.md and DESIGN.md.
Add the themis-ui-prototype opencode skill with workflow 0-5 (read tokens,
pick slug, author prototype, preview, screenshot+review, promote to Angular)
and references/tokens-cheatsheet.md, references/auth-shell-template.html,
references/preview-chrome.md.
Spec at docs/specs/2026-06-26-ui-designer-app/ (sdd, plan, requirements,
validation) with decisions D1-D9. Roadmap updated: removed the Auth Flow
Fidelity Pass phase (deleted spec), removed Phase 0 from Catalyst alignment
that referenced the external Open Design package, added the UI Designer App
phase. AGENTS.md and docs/agents/design-system.md point at the new skill.
Verification: pnpm nx run ui-designer:lint passes (0 errors, 1 unrelated
warning); pnpm nx run ui-designer:build + build-css produces
dist/apps/web/ui-designer/{main.js, public/tailwind.css, public/prototypes/*,
public/preview/chrome.html}; running the bundle on port 4399 returns 200
for /healthz, /api/prototypes, /, /preview/app-auth-shell,
/preview/app-auth-shell/frame?theme=dark, /public/tailwind.css and 404 for
unknown slugs. pnpm nx run-many -t lint passes for app, site, api, server,
worker, realtime, ui-designer.
Deletes: resources/open-design/themis-app/ (16 entries),
.opencode/skills/themis-design-system/ (6 files),
.opencode/skills/brand-guidelines/ (2 files),
docs/specs/2026-06-22-themis-web-app-redesign/ (4 files),
docs/specs/2026-06-23-themis-auth-fidelity-pass/ (4 files),
plan/feature-web-app-redesign-1.md. New skills and app tracked under
apps/web/ui-designer/ and .opencode/skills/{impeccable-design-polish,
login-flow, themis-ui-prototype}/.
visomi-dev
force-pushed
the
feat/OC/ui-designer-app
branch
from
f400e3a to
42c2d22
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the vendored Open Design prototypes and the inherited
themis-design-systemskill with a first-party Node + Tailwind v4 preview application and a newthemis-ui-prototypeopencode skill. The preview app reusesstyles.base.cssso prototypes, the Angular app, and the Astro site share the same Catalyst token source.What ships
apps/web/ui-designer/— new Nx node applicationlint(@nx/eslint:lint),build(@nx/esbuild:esbuild, ESM),build-css(nx:run-commandsinvoking the Tailwind CLI + copying prototypes/chrome todist/.../public/),serve(@nx/js:nodecontinuous watch). Default port 4300 (env-overridable).GET /(index),GET /preview/:slug(chrome with viewport switcher + theme toggle),GET /preview/:slug/frame?theme=light|dark(raw prototype, kebab-slug allowlist),GET /api/prototypes(JSON manifest),GET /healthz.src/prototypes/app-auth-shell.htmlmirrors the auth shell recipe fromdocs/design-system/recipes.md, mobile-first.apps/web/ui-designer/src/preview/preview.css— entry that importstailwindcss+styles.base.cssand uses@sourceto pick up utility classes fromsrc/prototypes/*.htmlandsrc/preview/chrome.html.docs/specs/2026-06-26-ui-designer-app/—sdd.md,plan.md,requirements.md,validation.md. Decisions D1-D9 captured.New opencode skill
.opencode/skills/themis-ui-prototype/with workflow 0-5 (read tokens, pick slug, author, preview, screenshot+review, promote to Angular) and references for tokens, the auth shell template, and the preview chrome. Replaces the deletedthemis-design-systemskill.Two upstream open-design skills vendored verbatim with
THEMIS_NOTES.mdfor upgrade tracking:impeccable-design-polish,login-flow. The open-designbrand-guidelinesskill is intentionally NOT vendored: it points at Anthropic's brand assets which Themis does not use. The Themis brand contracts already live indocs/design-system/tokens.mdandDESIGN.md.Cleanup
resources/open-design/themis-app/(16 entries including HTML prototypes, artifact JSONs, critique JSON,.od-skills/)..opencode/skills/themis-design-system/(6 files).docs/specs/2026-06-22-themis-web-app-redesign/anddocs/specs/2026-06-23-themis-auth-fidelity-pass/(completed specs whose visual source was the vendored prototypes).plan/feature-web-app-redesign-1.md.docs/constitution/roadmap.md: removed the "Auth Flow Fidelity Pass" phase, removed the Phase 0 line from Catalyst alignment that referenced the external Open Design package, added the "UI Designer App" phase pointing at the new spec.docs/agents/design-system.md: added a prototyping section that points at the new skill.AGENTS.md: added a context-loading bullet for thethemis-ui-prototypeskill.package.json: addedpostcss@^8.5.0+@tailwindcss/cli@^4.3.1as devDependencies (Tailwind CLI is what thebuild-csstarget invokes).Test plan
pnpm nx run ui-designer:lint— passes (0 errors, 1 unrelatedimport-x/no-named-as-default-memberwarning).pnpm nx run ui-designer:build --skip-nx-cache— producesdist/apps/web/ui-designer/main.js.pnpm nx run ui-designer:build-css --skip-nx-cache— producesdist/apps/web/ui-designer/public/{tailwind.css, prototypes/app-auth-shell.html, preview/chrome.html}. Tailwind CSS is 122 KB with 66 utilities generated for zinc + blue scales.GET /healthz→{"ok":true}GET /api/prototypes→{"prototypes":[{"slug":"app-auth-shell","title":"App Auth Shell"}]}GET /→ index listing the seed prototypeGET /preview/app-auth-shell?viewport=mobile→ preview chrome at 375pxGET /preview/app-auth-shell/frame?theme=dark→ prototype with<html class="dark">GET /preview/non-existent→ 404pnpm nx run-many -t lint --projects=app,site,api,server,worker,realtime,ui-designer— all pass.pnpm commitlint --from=HEAD~1 --to=HEAD— passes (lines within the 240-char limit).Follow-ups (out of scope for this PR)
apps/web/siteto link into the preview.apps/web/app/version.jsonbump — intentionally not applied here because the2026-06-23-catalyst-pure-tokens-alignmentspec also targets 1.3.0 and hasn't landed yet. When the two specs merge in order, the next bump is 1.4.0 by this spec.Refs:
docs/specs/2026-06-26-ui-designer-app/