| name | morphofeed-commercial-web-doctrine |
| description | Applies MorphoFeed commercial website doctrine—reframe pages as market-facing decision surfaces (not documents), layer brand then product architecture then scientific proof, translate prose into interface (hero, grids, proof strips, CTAs), and run strategic/design/brand critique loops. Use when designing or upgrading marketing routes, home or documented-science pages, or when the user rejects documentation-style layouts, generic biotech/SaaS templates, science-as-whole-identity, or stock-brochure aesthetics. |
MorphoFeed commercial web doctrine
Non-negotiables (repo)
- Copy changes require explicit approval; default source is
src/content/morphofeed.ts. Doctrine applies to structure, hierarchy, and presentation first.
- Visual system:
tailwind.config.ts, src/styles/index.css—semantic tokens (canvas, surface, parchment, brand, moss, ember), not pasted mock hex unless rebranding.
- Companion skill: For restraint and token polish after layout work, see morphofeed-ui-quality.
1. Core philosophy
| Idea | Practice |
|---|
| A site is not a document | It positions, persuades, guides, prioritizes, converts, builds trust—a decision surface, not a knowledge article. |
| Science is a trust layer | Order: brand → product architecture → proof → references. Not “Documented Science as the whole identity.” |
| Buyers scan | First screen + first sections answer: what, why care, credible, relevant, next step—scan clarity, not literary completeness. |
| Premium = reduction | Less noise, sharper hierarchy, fewer competing ideas, stronger spacing, confident contrast—discipline over decoration. |
2. Command set (run before heavy design)
- Reclassify the artifact — “This is a premium biotech-commercial product website, not a documentation page or technical note.”
- State the page job in one sentence — If unclear, output will be generic.
- Separate identity from evidence — Brand voice, commercial structure, and scientific proof are different layers; do not collapse into one editorial stack.
- Convert prose into interface — Meaning → sections, cards, grids, proof strips, CTAs (see reference.md translation table).
- Design for scan — Assume 5–12 seconds on first screen; first three sections optimized for scan, not completeness.
- Build in layers — Positioning → hierarchy → IA → trust signals → visual rhythm → CTA → then decorative styling (weak AI often reverses this).
3. Capabilities to apply
- Artifact reframing — e.g. from “science article” to “commercial landing with proof architecture.”
- Message hierarchy — Primary (what the company is, what the platform does) → secondary (how, why it matters) → tertiary (references, deep science).
- Interface translation — Map content types to UI patterns (reference.md).
- Commercial judgment — Per section: does it help decide, trust, navigate, or is it “just words”? Compress or redesign if the latter.
- Brand-pressure test — “Does this feel like a serious company with proprietary product architecture and scientific credibility?” If no, too generic.
- Proof architecture — Structure claims, mechanisms, references, journals/institutions, commercial applicability—not prose overload.
4. Identity & anti-patterns
Should feel: scientific, modern, premium, commercially credible, structured, institutional, biologically intelligent.
Should not feel like: supplement brochure, academic whitepaper, generic SaaS, lab stock-photo template, crowded catalog, technical dump.
Visual tone: institutional confidence, scientific precision, commercial maturity—high-contrast hero, modular sections, product architecture cards, proof banding, controlled whitespace.
Copy behavior: fewer words, sharper claims, stronger nouns—avoid bloated educational prose (copy edits still need product approval if not in morphofeed.ts).
5. Master prompt pattern (short form)
Use or adapt from reference.md. Always include: reclassification, page job, visitor/trust/conversion framing, then section skeleton (hero → proof strip → product architecture → mechanisms → outcomes/support → CTA), and explicit avoid list (documentation feel, article feel, undifferentiated sections).
6. Critique loop (after each meaningful output)
Strategic: Website or still a document? First screen positions brand? Science supports brand vs replaces it? Product platform clear in ~10 seconds?
Design: Hierarchy clear? Too word-heavy? Product lines visually structured? CTA path obvious? Differentiated or generic?
Brand: Premium, modern, serious, market-ready?
If not, revise before adding styling.
7. Reusable command phrases
Copy-paste library: reference.md.
Mindset shifts: “Explain everything” → “Prioritize what matters.” “Write all information” → “Stage information in the right layer.” “Look scientific” → “Credible, modern, commercially usable.” “Design a page” → “Design a decision journey.”
8. One-block doctrine (teach the model)
- A website is a business instrument, not a text container.
- Information must be ranked, not merely displayed.
- Science-heavy brands need proof architecture, not prose overload.
- Product platforms must be shown structurally, not described endlessly.
- Premium comes from control, hierarchy, restraint.
- Every section must earn its place by improving clarity, trust, or conversion.
Refuse to accept the wrong artifact category: if the input behaves like documentation, the real task is brand positioning + commercial IA + science-backed trust design.
