You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/saarthi/index.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -36,7 +36,7 @@ import SaarthiIcon from '@site/src/components/SaarthiIcon';
36
36
## Key Features
37
37
38
38
### Multiple Agents
39
-
Saarthi adapts to your needs with specialized [modes](./basic-usage/using-modes) and [workflows](/docs/saarthi/workflows.md):
39
+
Saarthi adapts to your needs with specialized [modes](./basic-usage/using-modes) and [workflows](/docs/saarthi/workflows/general.md):
40
40
41
41
42
42
**[💻 Code](./modes/code.md):** For general-purpose coding tasks, now with integrated support for Godspeed’s 4th-gen meta framework for backend development, enabling guard-railed 10x engineering practices—automatically.
@@ -66,7 +66,7 @@ Saarthi adapts to your needs with specialized [modes](./basic-usage/using-modes)
66
66
67
67
68
68
### Smart Tools
69
-
- Saarthi comes with powerful **[workflows](/docs/saarthi/workflows.md)** that can automate your multi-step dev tasks.
69
+
- Saarthi comes with powerful **[workflows](/docs/saarthi/workflows/general.md)** that can automate your multi-step dev tasks.
Copy file name to clipboardExpand all lines: docs/saarthi/workflows/general.md
+20-57Lines changed: 20 additions & 57 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,8 @@
1
+
---
2
+
sidebar_label: General
3
+
---
4
+
5
+
1
6
# Workflows
2
7
3
8
Workflows in Saarthi are **sequences of actions** defined to automate common development and deployment tasks. They are customizable and bring consistency, guardrails, and speed to your engineering process — from setting up a Godspeed project to deploying on cloud, generating UIs, creating test strategies, or even drafting technical documents.
@@ -136,49 +141,7 @@ Sets up authentication in your Godspeed microservice using supported auth method
136
141
137
142
---
138
143
139
-
### 7. Figma to UI Generation
140
-
141
-
**Description:**
142
-
Convert your Figma designs into responsive UI components and pages.
143
-
144
-
**Pre-requirements:**
145
-
146
-
* Figma file URL
147
-
* Figma Personal Access Token
148
-
149
-
**Process:**
150
-
151
-
1.**Select Workflow** – Choose `Figma to UI Generation` from workflows dropdown.
152
-
2.**Provide Figma Details** – Enter Figma URL + Access Token.
153
-
3.**Extract Components** – Saarthi generates component hierarchy with `gs-nodegen-figma`.
3.**Scaffolding** – Generates the project structure (or uses existing) via `gs-ui-init` tool.
22
+
4.**API Setup (Optional)** – If a Swagger spec is provided, generates API slices using `gs-codegen-openapi`tool and sets up the Redux store/provider.
23
+
5.**Component Implementation** – Iteratively reads schemas and Figma images to build responsive, atomic components and transfers necessary assets.
24
+
6.**Assembly & Routing** – Combines components into full web pages and configures application routing.
25
+
7.**Validation & Handoff** – Runs the development server and asks the user to confirm if the output meets requirements or if changes are needed before final delivery.
26
+
27
+
### 🔑 How to Get a Figma API Key
28
+
29
+
1. Go to **Figma → Settings → Security**.
30
+
2. Under **Personal Access Tokens**, click **Generate new token**.
31
+
3. Copy the generated token and store it securely.
32
+
4. Use this token when prompted by Saarthi or the CLI.
***Clear Naming:** Use descriptive layer names in Figma to help with component identification.
37
+
***Large Designs:** To generate large Figma files in one go, move to a paid Figma plan. On free or limited plans, prefer generating smaller pages or sections incrementally.
This indicates that your Figma API key has hit rate limits.
53
+
54
+
**Note:** Many Figma APIs used by this tool are **Tier-1 APIs** and are subject to the limits described in the [Figma rate-limit documentation](https://developers.figma.com/docs/rest-api/rate-limits/#rate-limits-tier-table).
55
+
If you are on a limited or free plan, you may encounter frequent connection errors.
56
+
57
+
**Recommended actions:**
58
+
- Retry after some time.
59
+
- Use smaller design or page-level URLs.
60
+
- Move to a paid Figma plan for large or frequent exports.
This means the token does not have access to the Figma file.
67
+
68
+
**Check the following:**
69
+
- Verify that the Figma account used to generate the token has access to the design.
70
+
- If you are on a paid plan, ensure the design is added to the correct paid team/workspace.
71
+
</details>
72
+
73
+
<details>
74
+
<summary><strong>500 Error or Timeout</strong></summary>
75
+
76
+
This can occur due to:
77
+
- Large or complex Figma designs
78
+
- API rate limits on free or limited plans
79
+
- Figma servers not responding in time
80
+
81
+
**Recommended actions:**
82
+
- Try generating smaller pages or sections instead of the full file.
83
+
- Retry later.
84
+
- Move to a paid Figma plan to reduce timeouts and API throttling.
85
+
</details>
86
+
87
+
---
88
+
89
+
## Prompt to UI Generation
90
+
91
+
**Description:**
92
+
93
+
Generate UI pages and components directly from text prompts or PRDs.
94
+
This workflow emphasizes predictability and reuse by leveraging the `gs-ui-kit` tool.
95
+
96
+
**Prerequisites:**
97
+
- A text prompt or PRD/TRD
98
+
- Project brief
99
+
- Optional: Swagger/OpenAPI spec JSON for API integration
100
+
101
+
**Process:**
102
+
1.**Scaffolding** – Sets up the UI project workspace via `gs-ui-init` tool.
103
+
2.**Requirement Gathering** – Captures project goals or parses the provided PRD.
104
+
3.**API Setup (Optional)** – Generates API slices via `gs-codegen-openapi` tool and wraps the app in a Redux provider.
105
+
4.**Strategy & Component Selection** – Analyzes requirements to create a `ui-details.md` plan, selecting necessary components and variants from `gs-ui-kit` tool.
106
+
5.**Build & Assemble** – Iteratively builds components (adapting from the kit or generating new ones) and assembles them into pages.
107
+
6.**Validation & Handoff** – Starts the development server, verifies navigation, and asks the user to confirm if the application is ready or requires refinement.
108
+
109
+
110
+
### 💡 Tips for Best Results
111
+
***Be Explicit:** Clearly state the page purpose (e.g., "dashboard", "auth page") and specific behaviors.
112
+
***Structure over Aesthetics:** Focus the prompt on layout and functionality first; refine styles later.
113
+
***API Planning:** Identify which components need which endpoints early in the prompt.
114
+
115
+
---
116
+
117
+
## Image to UI Generation
118
+
119
+
**Description:**
120
+
121
+
Generate UI pages and components directly from design images.
122
+
This workflow balances creative freedom with guardrails using atomic design principles.
1.**Image Upload** – User provides design images for pages or sections.
131
+
2.**Scoping** – Define whether the image maps to a full page or a specific component.
132
+
3.**Scaffolding** – Sets up the UI project workspace.
133
+
4.**Metadata Capture** – User provides context (colors, fonts, themes).
134
+
5.**Generation** – Creates atomic components based on image analysis.
135
+
6.**Assembly** – Wires components into pages and connects optional APIs.
136
+
7.**Validation & Handoff** – Runs the application and asks the user to validate the visual fidelity and functionality before finishing.
137
+
138
+
### 💡 Tips for Best Results
139
+
***Use high-resolution images** – Clear contrast and crisp details lead to better code generation
140
+
***Provide actual asset files upfront** – Share logos, icons, illustrations, and image assets directly instead of relying on generated placeholders. This ensures visual accuracy and maintains brand consistency
141
+
***Define design tokens clearly** – Specify your color palette, typography, and spacing scale before generation
142
+
***Document theme details** – Be explicit about light/dark mode, shadows, borders, and other style properties
143
+
***Share design system guidelines** – If you have existing design standards, provide them to maintain consistency across generated components
Copy file name to clipboardExpand all lines: docs/welcome.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ sidebar_label: Welcome
7
7
8
8
Godspeed is the first agentic SDLC platform that helps you build production-grade software 10x faster. Powered by a 4th-gen framework- [Param](/docs/microservices-framework/introduction/overview.md), AI agents, and built-in guardrails, it brings consistency to modern development. Even entry-level engineers and LLMs can ship clean, scalable code with ease.
9
9
10
-
Meet [Saarthi](/docs/saarthi/index.md), your multi-agent team inside VS Code. It automates every step of the Software Development Lifecycle - from idea to release, through intelligent [Modes](../basic-usage/using-modes) and [Workflows](/docs/saarthi/workflows.md)
10
+
Meet [Saarthi](/docs/saarthi/index.md), your multi-agent team inside VS Code. It automates every step of the Software Development Lifecycle - from idea to release, through intelligent [Modes](../basic-usage/using-modes) and [Workflows](/docs/saarthi/workflows/general.md)
11
11
12
12
Plan with PRDs, design with TRDs, generate tasks, implement features, review code, and deploy - all without leaving your IDE.
0 commit comments