docs: update all documentation and add AI tooling configs
- Rewrite README.md with current architecture, features and stack - Update docs/API.md with all current endpoints (corporate, BI, client 360) - Update docs/ARCHITECTURE.md with cache, modular queries, services, ETL - Update docs/GUIA-USUARIO.md for all roles (admin, corporate, agente) - Add docs/INDEX.md documentation index - Add PROJETO.md comprehensive project reference - Add BI-CCC-Implementation-Guide.md - Include AI agent configs (.claude, .agents, .gemini, _bmad) - Add netbird VPN configuration - Add status report Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,349 @@
|
||||
# Content Creation Workshop - Output
|
||||
|
||||
**Strategically Grounded Content with Full Traceability**
|
||||
|
||||
**Content Section:** {content-section-name}
|
||||
**Page/Context:** {page-or-scenario-name}
|
||||
**Created:** {date}
|
||||
**Method:** WDS Content Creation Workshop (5-Model Framework)
|
||||
|
||||
---
|
||||
|
||||
## Strategic Foundation
|
||||
|
||||
### Step 1: Trigger Map Context
|
||||
|
||||
```yaml
|
||||
trigger_map_reference:
|
||||
business_goal: "{goal text}"
|
||||
solution: "{solution name/description}"
|
||||
user:
|
||||
name: "{persona name}"
|
||||
description: "{brief persona description}"
|
||||
driving_forces:
|
||||
positive: "{wish/aspiration}"
|
||||
negative: "{fear/frustration}"
|
||||
customer_awareness:
|
||||
start: "{awareness level where user begins}"
|
||||
end: "{awareness level we want them to reach}"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Content Strategy
|
||||
|
||||
### Step 2: Customer Awareness Strategy
|
||||
|
||||
```yaml
|
||||
awareness_strategy:
|
||||
start_level: "{awareness level}"
|
||||
start_characteristics:
|
||||
- "{what they know}"
|
||||
- "{what they don't know}"
|
||||
- "{how they feel}"
|
||||
|
||||
end_level: "{awareness level}"
|
||||
end_characteristics:
|
||||
- "{what they'll know}"
|
||||
- "{what they'll understand}"
|
||||
- "{how they'll feel}"
|
||||
|
||||
language_guidelines:
|
||||
use: ["{appropriate terms}"]
|
||||
avoid: ["{confusing jargon}"]
|
||||
tone: "{conversational, authoritative, empathetic, etc.}"
|
||||
|
||||
information_priorities:
|
||||
essential: ["{must include}"]
|
||||
helpful: ["{nice to include if space}"]
|
||||
avoid: ["{too advanced, confusing, or premature}"]
|
||||
|
||||
credibility_required:
|
||||
type: "{personal story, expert credentials, data, social proof}"
|
||||
examples: ["{specific proof elements}"]
|
||||
|
||||
emotional_journey:
|
||||
starting_emotion: "{frustrated, confused, etc.}"
|
||||
bridge: "{how we facilitate the shift}"
|
||||
ending_emotion: "{hopeful, confident, etc.}"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Content Filtering
|
||||
|
||||
### Step 3: Action Filter
|
||||
|
||||
```yaml
|
||||
action_filter:
|
||||
required_action:
|
||||
description: "{Specific action user must be able to take}"
|
||||
success_criteria: "{How we know they can do it}"
|
||||
|
||||
business_impact:
|
||||
connection: "{How this action drives the business goal}"
|
||||
logic: "{Action → Outcome → Goal}"
|
||||
|
||||
user_motivation:
|
||||
positive_driver: "{How action satisfies their wish}"
|
||||
negative_driver: "{How action addresses their fear}"
|
||||
|
||||
essential_information:
|
||||
- "{Information element 1 - WHY needed for action}"
|
||||
- "{Information element 2 - WHY needed for action}"
|
||||
- "{Information element 3 - WHY needed for action}"
|
||||
|
||||
cut_list:
|
||||
- "{Nice-to-know info that doesn't enable action}"
|
||||
- "{Impressive but irrelevant content}"
|
||||
|
||||
action_barriers:
|
||||
- barrier: "{e.g., confusion about next steps}"
|
||||
solution: "{Content that removes this barrier}"
|
||||
- barrier: "{e.g., fear of commitment}"
|
||||
solution: "{Content that addresses this fear}"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Content Framing
|
||||
|
||||
### Step 4: Empowerment Frame
|
||||
|
||||
```yaml
|
||||
empowerment_frame:
|
||||
transformation:
|
||||
current_state:
|
||||
description: "{Where user is now}"
|
||||
feelings: ["{frustrated}", "{uncertain}", "{behind}"]
|
||||
capabilities: "{What they can't do yet}"
|
||||
|
||||
badass_state:
|
||||
description: "{Where they're going}"
|
||||
feelings: ["{confident}", "{capable}", "{ahead}"]
|
||||
capabilities: "{What they'll be able to do}"
|
||||
|
||||
visibility: "{How we make the transformation visible and achievable}"
|
||||
|
||||
aha_moment:
|
||||
insight: "{Key realization that shifts perspective}"
|
||||
why_powerful: "{Why this unlocks confidence}"
|
||||
|
||||
capability_framing:
|
||||
- feature: "{Product feature}"
|
||||
reframed: "{What USER can do because of it}"
|
||||
- feature: "{Product feature}"
|
||||
reframed: "{What USER can do because of it}"
|
||||
|
||||
cognitive_load:
|
||||
potential_issues:
|
||||
- issue: "{Where content might overwhelm}"
|
||||
solution: "{How we reduce load}"
|
||||
|
||||
simplifications:
|
||||
- "{What we simplified or cut}"
|
||||
|
||||
skill_focus:
|
||||
primary_skill: "{Main capability user develops}"
|
||||
supporting_skills: ["{Related capabilities}"]
|
||||
tools_secondary: "{Tools are means to skill, not the focus}"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Content Structure
|
||||
|
||||
### Step 5: Structural Order (Golden Circle)
|
||||
|
||||
```yaml
|
||||
structural_order:
|
||||
section_why:
|
||||
purpose: "Emotional truth / Why user should care"
|
||||
content_elements:
|
||||
- order: 1
|
||||
element: "{Opening hook}"
|
||||
rationale: "{Why this opens}"
|
||||
- order: 2
|
||||
element: "{Validation or aspiration}"
|
||||
rationale: "{Why this comes second}"
|
||||
|
||||
section_how:
|
||||
purpose: "Method / Bridge from emotion to specifics"
|
||||
content_elements:
|
||||
- order: 1
|
||||
element: "{Solution approach}"
|
||||
rationale: "{Why this bridges first}"
|
||||
- order: 2
|
||||
element: "{Key differentiator}"
|
||||
rationale: "{Why this matters here}"
|
||||
- order: 3
|
||||
element: "{Transformation path}"
|
||||
rationale: "{Why this comes last in HOW}"
|
||||
|
||||
section_what:
|
||||
purpose: "Specifics / Proof / Action"
|
||||
content_elements:
|
||||
- order: 1
|
||||
element: "{Product/offer name}"
|
||||
rationale: "{Why we can name it now}"
|
||||
- order: 2
|
||||
element: "{Social proof}"
|
||||
rationale: "{Why proof comes here}"
|
||||
- order: 3
|
||||
element: "{CTA}"
|
||||
rationale: "{Why action comes last}"
|
||||
|
||||
flow_validation:
|
||||
feels_natural: "{yes/no + notes}"
|
||||
persuasive_arc: "{Does WHY → HOW → WHAT create emotional → logical → action flow?}"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Final Content
|
||||
|
||||
### Step 6: Generated Content
|
||||
|
||||
#### Variations Presented
|
||||
|
||||
**Variation A: {Name - e.g., "Wish-Focused"}**
|
||||
|
||||
*Rationale:* {Why this approach, what driving force it emphasizes}
|
||||
|
||||
```
|
||||
WHY Section:
|
||||
{Content for WHY}
|
||||
|
||||
HOW Section:
|
||||
{Content for HOW}
|
||||
|
||||
WHAT Section:
|
||||
{Content for WHAT}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Variation B: {Name}**
|
||||
|
||||
*Rationale:* {Why this approach}
|
||||
|
||||
```
|
||||
WHY Section:
|
||||
{Content for WHY}
|
||||
|
||||
HOW Section:
|
||||
{Content for HOW}
|
||||
|
||||
WHAT Section:
|
||||
{Content for WHAT}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Variation C: {Name}** *(if applicable)*
|
||||
|
||||
*Rationale:* {Why this approach}
|
||||
|
||||
```
|
||||
WHY Section:
|
||||
{Content for WHY}
|
||||
|
||||
HOW Section:
|
||||
{Content for HOW}
|
||||
|
||||
WHAT Section:
|
||||
{Content for WHAT}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### Selection & Refinement
|
||||
|
||||
**Chosen Approach:** {Which variation or combination}
|
||||
|
||||
**Reasoning:** {Why user selected this}
|
||||
|
||||
**Adjustments Made:** {Any refinements}
|
||||
|
||||
---
|
||||
|
||||
#### FINAL CONTENT (Implementation-Ready)
|
||||
|
||||
**WHY Section:**
|
||||
|
||||
```
|
||||
{Final WHY content}
|
||||
```
|
||||
|
||||
**HOW Section:**
|
||||
|
||||
```
|
||||
{Final HOW content}
|
||||
```
|
||||
|
||||
**WHAT Section:**
|
||||
|
||||
```
|
||||
{Final WHAT content}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Strategic Traceability
|
||||
|
||||
**This content serves:**
|
||||
|
||||
- **Business Goal:** {How this drives the goal}
|
||||
- **User Driving Forces:**
|
||||
- Positive: {How it satisfies wish}
|
||||
- Negative: {How it addresses fear}
|
||||
- **Customer Awareness Journey:** {START → END validated}
|
||||
- **Required Action:** {What user can now do}
|
||||
- **User Empowerment:** {How they feel capable}
|
||||
- **Persuasive Structure:** {WHY → HOW → WHAT confirmed}
|
||||
|
||||
---
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
**Technical/Design Requirements:**
|
||||
- {Any technical constraints or requirements}
|
||||
- {Design system components needed}
|
||||
- {Responsive behavior notes}
|
||||
|
||||
**Multi-Language Support:**
|
||||
- English: {Status}
|
||||
- {Language 2}: {Status}
|
||||
- {Language 3}: {Status}
|
||||
|
||||
**Assets Needed:**
|
||||
- Images: {List image requirements}
|
||||
- Videos: {List video requirements}
|
||||
- Icons/Graphics: {List graphic requirements}
|
||||
|
||||
**Testing Considerations:**
|
||||
- {A/B test recommendations}
|
||||
- {User testing focus areas}
|
||||
- {Success metrics to track}
|
||||
|
||||
---
|
||||
|
||||
## Workshop Metadata
|
||||
|
||||
**Duration:** {Actual time spent}
|
||||
|
||||
**Participants:**
|
||||
- Designer: {name}
|
||||
- Agent: {agent name}
|
||||
|
||||
**Alpha Feedback:**
|
||||
- {What worked well}
|
||||
- {What felt clunky}
|
||||
- {What's missing}
|
||||
- {How to improve}
|
||||
|
||||
---
|
||||
|
||||
_Created using WDS Content Creation Workshop (5-Model Framework)_
|
||||
_Models: Trigger Map, Customer Awareness Cycle, Action Mapping, Badass Users, Golden Circle_
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
# Stitch Prompt Template
|
||||
|
||||
Use this template to prepare an effective Stitch prompt from a WDS specification.
|
||||
|
||||
---
|
||||
|
||||
## How to Use
|
||||
|
||||
1. **Copy this template** into your Stitch dialog
|
||||
2. **Fill in each section** using your spec and design system
|
||||
3. **Remove Object IDs, translations, technical details** - Stitch doesn't need them
|
||||
4. **Keep one language only** - typically the primary language (English or Swedish)
|
||||
5. **Paste the filled template** as your Stitch prompt
|
||||
|
||||
---
|
||||
|
||||
## Template Structure
|
||||
|
||||
```
|
||||
=== PROJECT CONTEXT ===
|
||||
|
||||
App: {App name} - {One-line description}
|
||||
Target: {Target audience}
|
||||
Brand feel: {2-3 adjectives describing the feel}
|
||||
Market: {Market focus if relevant}
|
||||
|
||||
=== DESIGN SYSTEM ===
|
||||
|
||||
Colors:
|
||||
- Background: {color name} ({hex})
|
||||
- Primary/CTA: {color name} ({hex})
|
||||
- Text: {color name} ({hex})
|
||||
- Secondary text: {color name} ({hex})
|
||||
- Success: {hex}
|
||||
- Error: {hex}
|
||||
|
||||
Typography:
|
||||
- Font: {font family}
|
||||
- Headlines: {weight}, {characteristics}
|
||||
- Body: {weight}, {size}
|
||||
|
||||
Component styles:
|
||||
- Buttons: {style description - rounded, gradient, shadow, etc.}
|
||||
- Inputs: {style description - border, focus state, etc.}
|
||||
- Cards: {style description if relevant}
|
||||
|
||||
=== SCREEN DETAILS ===
|
||||
|
||||
Screen: {Screen name}
|
||||
Purpose: {What this screen does, one sentence}
|
||||
User context: {Where user is coming from, what they need}
|
||||
|
||||
Layout structure:
|
||||
1. {Section 1}: {elements}
|
||||
2. {Section 2}: {elements}
|
||||
3. {Section 3}: {elements}
|
||||
|
||||
Key elements:
|
||||
- {Element 1}: "{Actual content/text}"
|
||||
- {Element 2}: "{Actual content/text}"
|
||||
- {Element 3}: "{Actual content/text}"
|
||||
|
||||
Key interactions:
|
||||
- Primary action: {what happens}
|
||||
- Secondary action: {what happens}
|
||||
|
||||
=== CURRENT STATE NOTES ===
|
||||
|
||||
{Note any elements currently using default/unstyled components}
|
||||
- {Component}: Currently ShadCN default, should match brand style
|
||||
- {Component}: Uses custom gradient button
|
||||
|
||||
=== GENERATION INSTRUCTIONS ===
|
||||
|
||||
Generate this screen matching:
|
||||
- Visual style of the attached reference image
|
||||
- Layout structure of the attached sketch
|
||||
- All content and elements listed above
|
||||
|
||||
Viewport: {Mobile 390px / Desktop 1440px}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example: Dog Week Sign-In
|
||||
|
||||
```
|
||||
=== PROJECT CONTEXT ===
|
||||
|
||||
App: Dog Week - Family dog walk coordination app
|
||||
Target: Swedish families (all ages from teens to grandparents)
|
||||
Brand feel: Warm, friendly, trustworthy
|
||||
Market: Sweden
|
||||
|
||||
=== DESIGN SYSTEM ===
|
||||
|
||||
Colors:
|
||||
- Background: Cream (#FEF3CF), gradient to #FFFBED
|
||||
- Primary/CTA: Orange (#FD6408), gradient #FD8002 to #FF2714
|
||||
- Text: Brown (#2F1A0C)
|
||||
- Secondary text: Gray (#686868)
|
||||
- Success: Green (#28C54A)
|
||||
- Error: Red (#DB0000)
|
||||
|
||||
Typography:
|
||||
- Font: Inter
|
||||
- Headlines: Bold/Extra Bold, tight letter spacing
|
||||
- Body: Regular weight, 16px base
|
||||
|
||||
Component styles:
|
||||
- Buttons: Rounded (8px), orange gradient for primary, subtle shadow
|
||||
- Inputs: Light background, rounded corners, brown text
|
||||
- Cards: Cream background, subtle shadow
|
||||
|
||||
=== SCREEN DETAILS ===
|
||||
|
||||
Screen: Sign In
|
||||
Purpose: Authenticate users with email magic link or Google SSO
|
||||
User context: Coming from Start Page, ready to access the app
|
||||
|
||||
Layout structure:
|
||||
1. Header: Logo (left), Back button (right)
|
||||
2. Main form: Email input, magic link button, divider, Google SSO
|
||||
3. Trust section: Privacy and security messages
|
||||
4. Help links: Support links at bottom
|
||||
|
||||
Key elements:
|
||||
- Email input label: "Email address"
|
||||
- Email placeholder: "your@email.com"
|
||||
- Helper text: "We'll send you a magic link to sign in"
|
||||
- Primary button: "Send magic link"
|
||||
- Divider text: "Or sign in with"
|
||||
- Google button: "Continue with Google"
|
||||
- Trust message 1: "Your information is secure and private"
|
||||
- Trust message 2: "We'll never spam you or share your details"
|
||||
- Trust message 3: "Safe for all family members to use"
|
||||
|
||||
Key interactions:
|
||||
- Primary: Enter email → Send magic link → Check email
|
||||
- Secondary: Click Google → OAuth flow → Signed in
|
||||
|
||||
=== CURRENT STATE NOTES ===
|
||||
|
||||
- Input fields: Currently ShadCN default styling, should use cream background
|
||||
- Google button: Should match brand's rounded style with Google colors
|
||||
- Trust icons: Need checkmark or shield icons in success green
|
||||
|
||||
=== GENERATION INSTRUCTIONS ===
|
||||
|
||||
Generate this sign-in screen matching:
|
||||
- Visual style of the attached Start Page screenshot (warm, cream, orange CTAs)
|
||||
- Layout structure of the attached sketch
|
||||
- All content and elements listed above
|
||||
|
||||
Viewport: Mobile 390px
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Checklist Before Pasting to Stitch
|
||||
|
||||
- [ ] Project context filled (app name, target, brand feel)
|
||||
- [ ] Design system colors accurate (from Color-Palette.md)
|
||||
- [ ] Typography correct (from Typography-System.md)
|
||||
- [ ] Component styles described (buttons, inputs)
|
||||
- [ ] Screen content in ONE language only (no translations)
|
||||
- [ ] No Object IDs included
|
||||
- [ ] No technical implementation details
|
||||
- [ ] Current state notes added (what's ShadCN default)
|
||||
- [ ] Viewport specified
|
||||
|
||||
---
|
||||
|
||||
_Stitch Prompt Template — Freya WDS Designer_
|
||||
Reference in New Issue
Block a user