3.7 KiB
3.7 KiB
type, id, title, status, source_of_truth, freshness, last_reviewed, tags
| type | id | title | status | source_of_truth | freshness | last_reviewed | tags | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| context | context.kontra-day.getdesign-md | getdesign.md | active | false | current | 2026-09-08 |
|
getdesign.md
Rich discovery update (2026-09-08 05:34:12)
Skill active — and let me answer your Stitch workflow question with verified facts, because it determines how we run Phase Two.
What Google Stitch can actually export (as of the latest updates)
| Export | Works? | Note |
|---|---|---|
| Copy code / download (HTML/CSS/Tailwind) | ✅ Yes | Its core output. Real components, not images — and Tailwind is exactly our stack. |
| To Figma | ⚠️ Flaky | Direct Stitch→Figma has been unreliable/long-queued (known bug threads); an MCP route exists. Not dependable. |
| To Google AI Studio | ✅ Yes (Stitch 2.0+) | Can push designs into AI Studio projects. |
| Project brief / DESIGN.md | ❌ No direct feature | Doesn't produce one — but this is what I do for you: I write the DESIGN.md (tokens + brief) from your Stitch panels, and that's what design-build consumes later. |
What I'd actually recommend for Kontra Day
Stitch's real value here is visual exploration + a Tailwind reference. The practical pipeline:
- You keep designing panels in Stitch → screenshot what you like.
- I turn the approved panels into a
DESIGN.md— exact palette, typography, spacing, radius + a written identity brief (the "project brief" you mentioned, as the file format this workflow already uses). - I generate alternative directions via this skill's
image-makerso you can compare. - Build uses the tokens + Stitch's Tailwind export as reference → real templ components. (Stitch's HTML won't drop straight into templ, but it's a strong visual contract.)
So: yes — copy the Tailwind code and/or push to AI Studio, but treat both as reference; the lasting artifact is DESIGN.md. Figma isn't worth the friction for a solo project unless you like working there.
Fonts & readability (your instinct is right to think about this)
For a news-opinion site, the classic readable pairing:
- Headlines: a strong serif or display face (e.g. Newsreader, Source Serif, Playfair) at large weight
- Body: a humanist sans or print-style serif at 17–18px, ~65–75 chars/line, 1.5–1.65 line height — this is the actual readability driver, more than the font choice itself
- Self-host the fonts (no Google CDN at runtime — performance + privacy), using variable fonts where possible
- Typography choices go into DESIGN.md as tokens, so colours/fonts stay data-driven per our plan
So how do you want to start?
[tool:ask_user_question]
Source paths observed
getdesign.md/apple/design-mdgithub.com/VoltAgent/awesome-design-mdjustinmckelvey.com/blog/google-stitch-vs-figmaHTML/CSS/Tailwind
Evidence
- Confidence: 84%
- Reason: Update component/repository context with detailed discovered structure and configuration
Related
Related learned memories
- session: packs/kontra-day/80-sessions/rich-discovery-getdesign-md-2026-09-08-05-34-12
- context: packs/kontra-day/20-context/getdesign-md
- runbook: packs/kontra-day/70-runbooks/getdesign-md-deployment-operations
- observation: packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns