# Table of Contents - [Docs - Flowstep](#docs-flowstep) - [Unknown](#unknown) - [فوترة Flowstep: الدورات والإلغاء والوصول - Flowstep](#-flowstep-flowstep) - [Flowstep-organisationer: teams, roller og tilladelser - Flowstep](#flowstep-organisationer-teams-roller-og-tilladelser-flowstep) - [Flowstep MCP — Claude Code - Flowstep](#flowstep-mcp-claude-code-flowstep) - [Set design guidelines to keep every Flowstep generation on-brand - Flowstep](#set-design-guidelines-to-keep-every-flowstep-generation-on-brand-flowstep) - [MCP-användningsgränser - Flowstep](#mcp-anv-ndningsgr-nser-flowstep) - [Flowstep MCP — Windsurf - Flowstep](#flowstep-mcp-windsurf-flowstep) --- # Docs - Flowstep > Documentation Index > ------------------- > > Fetch the complete documentation index at: [/llms.txt](https://docs.flowstep.ai/llms.txt) > > Use this file to discover all available pages before exploring further. [Skip to main content](https://docs.flowstep.ai/#content-area) ![V2 Ph Gallery 2](https://mintcdn.com/flowstep/9tdNFQ3IqDuOMu2P/images/v2-ph-gallery-2.jpg?w=2500&fit=max&auto=format&n=9tdNFQ3IqDuOMu2P&q=85&s=e4f24a78915b4f62996f70142d47fda0 "V2 Ph Gallery 2") ![V2 Ph Gallery 2](https://mintcdn.com/flowstep/9tdNFQ3IqDuOMu2P/images/v2-ph-gallery-2.jpg?w=2500&fit=max&auto=format&n=9tdNFQ3IqDuOMu2P&q=85&s=e4f24a78915b4f62996f70142d47fda0 "V2 Ph Gallery 2") Flowstep generates production-ready UI screens from plain text prompts. Describe the screen you want — get a designed interface back in seconds. Iterate through follow-up prompts or direct edits, export to Figma or image files, and share with your team via a single link. For developers and technical designers, Flowstep also runs as an [MCP server](https://docs.flowstep.ai/mcp/overview) — generate and edit screens directly from Cursor, Claude Code, Windsurf, or Claude Desktop without leaving your IDE. [Get Started\ -----------\ \ Sign up for free and generate your first screen in minutes.](https://docs.flowstep.ai/getting-started) [MCP Server\ ----------\ \ Use Flowstep from Cursor, Claude Code, or any MCP-compatible client.](https://docs.flowstep.ai/mcp/overview) [Generating designs\ ------------------\ \ How to write prompts that produce the screens you actually want.](https://docs.flowstep.ai/generating-designs) [Figma integration\ -----------------\ \ Paste Flowstep designs into an existing Figma file with one shortcut.](https://docs.flowstep.ai/figma-integration) [​](https://docs.flowstep.ai/#how-it-works) How it works ----------------------------------------------------------- 1 Sign up Create a free account at [flowstep.ai](https://flowstep.ai/) . No credit card required. 2 Describe what you want Type a prompt — for example, “Onboarding screen for a fitness tracking app with email signup and a progress goal step.” 3 Generate and refine Flowstep returns the screen instantly. Iterate via follow-up prompts, edit the canvas directly, or generate variations. 4 Export or share Export as PNG/JPG, paste into Figma, or share a view-only link with stakeholders. They don’t need an account. [​](https://docs.flowstep.ai/#explore-the-docs) Explore the docs ------------------------------------------------------------------- [Editing designs\ ---------------\ \ Refine designs through prompts or direct manipulation on the canvas.](https://docs.flowstep.ai/editing-designs) [Design references\ -----------------\ \ Attach images, PRDs, or URLs to guide your designs without long prompts.](https://docs.flowstep.ai/design-references) [Sharing designs\ ---------------\ \ Share view-only links — recipients don’t need a Flowstep account.](https://docs.flowstep.ai/sharing-designs) [Billing & plans\ ---------------\ \ Message limits, billing cycles, and plan options.](https://docs.flowstep.ai/billing) Was this page helpful? YesNo Ctrl+I --- # Unknown \# Flowstep ## Docs - \[Flowstep billing: cycles, cancellation, and access\](https://docs.flowstep.ai/billing.md): Learn how Flowstep handles monthly and annual billing cycles, who can manage billing in an organization, how to cancel your subscription, and what happens after cancelling. - \[Flowstep data privacy policy and AI training limits\](https://docs.flowstep.ai/data-privacy.md): Flowstep does not use your personal data to train AI models, and neither do its LLM providers. Learn what data may be used and how. - \[Set design guidelines to keep every Flowstep generation on-brand\](https://docs.flowstep.ai/design-guidelines.md): Define file-level design guidelines in DESIGN.md format — colors, typography, spacing, and conventions that steer every AI generation and edit in the file. - \[Use references to guide and speed up Flowstep designs\](https://docs.flowstep.ai/design-references.md): Attach a PRD, upload an image, or paste a URL to give Flowstep context—so you can ideate faster without writing lengthy prompts. - \[Edit and iterate on Flowstep designs via chat or canvas\](https://docs.flowstep.ai/editing-designs.md): Refine any Flowstep-generated screen through manual visual editing or chat-based prompts — iterate as many times as needed until the design is right. - \[Download Flowstep designs as JPG or PNG image files\](https://docs.flowstep.ai/export-formats.md): Flowstep supports exporting designs as JPG or PNG. Learn which format suits your use case and how to download your screens in a few clicks. - \[Move designs between Flowstep and Figma\](https://docs.flowstep.ai/figma-integration.md): Copy any Flowstep frame into Figma with copy-and-paste, or import Figma frames into Flowstep as editable screens. Work across both tools without switching. - \[Generate UI screens from text prompts with Flowstep\](https://docs.flowstep.ai/generating-designs.md): Use Flowstep to generate one screen or up to 6 screens at once from a single text prompt — ideal for fast UI ideation and exploring full flows. - \[Get started with Flowstep: sign up and generate designs\](https://docs.flowstep.ai/getting-started.md): Create a free Flowstep account, generate your first UI design from a text prompt, and share it with your team — all in one sitting. - \[What is Flowstep?\](https://docs.flowstep.ai/introduction.md): Flowstep is an AI design tool that generates polished UI screens from text prompts. Learn what it does, who it's for, and what you can build with it. - \[Access and download your Flowstep billing invoices\](https://docs.flowstep.ai/invoices.md): Flowstep automatically generates invoices for all paid plans after each billing cycle. Download them anytime from your account dashboard. - \[MCP Authentication\](https://docs.flowstep.ai/mcp/authentication.md): How Flowstep MCP authenticates clients: OAuth 2.1 PKCE flow and account creation. - \[Flowstep MCP — claude.ai\](https://docs.flowstep.ai/mcp/clients/claude-ai.md): Connect Flowstep to claude.ai using a custom MCP connector. - \[Flowstep MCP — Claude Code\](https://docs.flowstep.ai/mcp/clients/claude-code.md): Connect Flowstep to Claude Code (CLI) using the Streamable HTTP MCP transport. - \[Flowstep MCP — Claude Desktop\](https://docs.flowstep.ai/mcp/clients/claude-desktop.md): Connect Flowstep to Claude Desktop using the Streamable HTTP MCP transport. - \[Flowstep MCP — Cursor\](https://docs.flowstep.ai/mcp/clients/cursor.md): Connect Flowstep to Cursor using the Streamable HTTP MCP transport. - \[Flowstep MCP — Windsurf\](https://docs.flowstep.ai/mcp/clients/windsurf.md): Connect Flowstep to Windsurf using the Streamable HTTP MCP transport. - \[MCP Examples\](https://docs.flowstep.ai/mcp/examples.md): End-to-end workflows for common Flowstep MCP tasks. - \[Flowstep MCP Server\](https://docs.flowstep.ai/mcp/overview.md): Use Flowstep as an MCP server to generate, inspect, and manage UI designs directly from Cursor, Claude Code, or any MCP-compatible client. - \[MCP Quickstart\](https://docs.flowstep.ai/mcp/quickstart.md): Connect Flowstep to your AI editor and run your first tool call. - \[MCP Tools Reference\](https://docs.flowstep.ai/mcp/tools.md): Input schema, output shape, and examples for all 20 Flowstep MCP tools. - \[MCP Usage Limits\](https://docs.flowstep.ai/mcp/usage-limits.md): How Flowstep usage limits apply to MCP tool calls, and how to check your remaining quota. - \[Flowstep messages explained: usage limits and resets\](https://docs.flowstep.ai/messages-and-limits.md): Find out what counts as a message in Flowstep, how daily and monthly limits work, how limits apply per seat in a team, and what happens when you hit your limit. - \[How to use Flowstep without prior design experience\](https://docs.flowstep.ai/no-design-skills.md): You don't need a design background to create great UI screens with Flowstep. Learn how to describe what you want and let Flowstep handle the rest. - \[Manage your organization: people, roles, and settings\](https://docs.flowstep.ai/organization-settings.md): Add members to your Flowstep organization, change roles, manage guests and pending invites, and rename your organization — all from Settings. - \[Flowstep organizations: teams, roles, and permissions\](https://docs.flowstep.ai/organizations.md): Learn how organizations work in Flowstep — what Owners, Admins, Members, and Guests can do, how files are shared across your team, and how to join or switch organizations. - \[Flowstep pricing: free trial, free tier, and paid plans\](https://docs.flowstep.ai/pricing.md): Start Flowstep with a free trial and no credit card. Compare the Free, Starter, Pro, and Max plans, with per-seat pricing and annual billing saving up to 20%. - \[Preview Flowstep designs as interactive prototypes\](https://docs.flowstep.ai/prototypes.md): Open any Flowstep file as a clickable prototype — Flowstep links your screens automatically, and you can set or lock navigation manually per element. - \[Seats and per-seat billing for Flowstep teams\](https://docs.flowstep.ai/seats.md): How seats work on Flowstep paid plans: who uses a seat, how adding and removing members affects your bill, and what happens to members without a seat. - \[How Flowstep protects your account data and designs\](https://docs.flowstep.ai/security.md): Learn how Flowstep protects your data with encryption in transit and at rest, and where to find full details about security in the Privacy Policy. - \[Share Flowstep designs with your team and stakeholders\](https://docs.flowstep.ai/sharing-designs.md): Generate a shareable link for any Flowstep design, control who can open a file with general access levels, and invite people to view or edit by email. --- # فوترة Flowstep: الدورات والإلغاء والوصول - Flowstep > Documentation Index > ------------------- > > Fetch the complete documentation index at: [/llms.txt](https://docs.flowstep.ai/llms.txt) > > Use this file to discover all available pages before exploring further. [الانتقال إلى المحتوى الرئيسي](https://docs.flowstep.ai/ar/billing#content-area) يمنحك Flowstep السيطرة على كيفية ودوقت دفعك. يمكنك اختيار الفوترة الشهرية أو السنوية عند الاشتراك، ويمكنك الإلغاء في أي وقت دون فقدان الوصول لبقية فترة الفوترة. [​](https://docs.flowstep.ai/ar/billing#%D9%85%D9%86-%D9%8A%D9%85%D9%83%D9%86%D9%87-%D8%A5%D8%AF%D8%A7%D8%B1%D8%A9-%D8%A7%D9%84%D9%81%D9%88%D8%AA%D8%B1%D8%A9) من يمكنه إدارة الفوترة ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- في مؤسسة ما، فقط **Owner** (صاحب المؤسسة) — الشخص الذي أنشأ المؤسسة — يمكنه إدارة الفوترة. **Owner** هو الشخص الوحيد الذي يرى صفحة **Plan & Billing** في الإعدادات وأزرار **Upgrade** في التطبيق. يمكن للمسؤولين **Admins** إضافة وإزالة الأشخاص، لكنهم لا يستطيعون ترقية الخطة أو تخفيضها أو تغيير المقاعد أو إلغاء الاشتراك — تتم مزامنة تغييرات المقاعد مع الاشتراك فقط من خلال **Owner**. راجع [Organizations](https://docs.flowstep.ai/ar/organizations) للاطلاع على التفصيل الكامل للأدوار. [​](https://docs.flowstep.ai/ar/billing#%D8%AF%D9%88%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D9%81%D9%88%D8%AA%D8%B1%D8%A9) دورات الفوترة ----------------------------------------------------------------------------------------------------------------------------------- عند الاشتراك في خطة Flowstep المدفوعة، تختار بين خيارين للفوترة: * **Monthly** — يتم فرض الرسوم عليك مرة واحدة شهريًا في تاريخ الفوترة. * **Annual** — يتم فرض الرسوم عليك مرة واحدة سنويًا. يتم فوترتك للسنة الكاملة مقدمًا في بداية فترة الفوترة. يتم فوترة الخطط المدفوعة لكل مقعد: إجمالي الخاص بك هو سعر الخطة لكل مقعد مضروبًا في عدد المقاعد — واحد لكل **Owner** و**Admin** و**Member** في مؤسستك. الضيوف **Guests** مجانيون ولا يتم احتسابهم. إضافة أشخاص في منتصف الدورة يتم حسابها بشكل تناسبي، لذا تدفع فقط عن بقية الفترة. راجع [Seats](https://docs.flowstep.ai/ar/seats) للتفاصيل. تسري ترقيات الخطة فورًا، بينما يسري التخفيضات في نهاية فترة الفوترة الحالية. اختيار الفوترة السنوية يوفر لك ما يصل إلى 20% مقارنة بالدفع شهريًا. إذا كنت تخطط لاستخدام Flowstep بانتظام، فإن الخطة السنوية هي الخيار الأكثر فعالية من حيث التكلفة. [​](https://docs.flowstep.ai/ar/billing#%D8%A5%D8%AF%D8%A7%D8%B1%D8%A9-%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%D9%83%D9%83) إدارة اشتراكك ----------------------------------------------------------------------------------------------------------------------------------- يدير **Owner** الاشتراك من **Settings → Plan & Billing**. على المستوى المجاني أو فترة تجريبية، تعرض الصفحة زر **Upgrade** يفتح منتقي الخطة. على خطة مدفوعة، تعرض زر **Manage** بدلاً من ذلك، والذي يفتح بوابة الفوترة حيث تدير تفاصيل الدفع والاشتراك. [​](https://docs.flowstep.ai/ar/billing#%D8%A7%D9%84%D8%A5%D9%84%D8%BA%D8%A7%D8%A1) الإلغاء ---------------------------------------------------------------------------------------------- يمكنك إلغاء اشتراك Flowstep في أي وقت — لا توجد رسوم إلغاء أو فترات قفل. للإلغاء، يفتح **Owner** بوابة الفوترة عبر **Manage** في صفحة **Plan & Billing**. يتلقى **Owner** بريدًا إلكترونيًا يؤكد الإلغاء والتاريخ الذي ينفذ فيه. عند الإلغاء، لا ينتهي اشتراكك فورًا. تحتفظ بإمكانية الوصول الكاملة إلى ميزات خطتك والرسائل المتبقية حتى نهاية فترة الفوترة الحالية. بعد ذلك، تنتقل مؤسستك إلى خطة Free مع مقعد واحد — يحتفظ **Owner** بإمكانية الوصول للتحرير، وأي أعضاء آخرين يصبحون بإمكانية القراءة فقط حتى تقوم بالترقية مرة أخرى. [​](https://docs.flowstep.ai/ar/billing#%D8%A7%D9%84%D9%81%D9%88%D8%A7%D8%AA%D9%8A%D8%B1) الفواتير ----------------------------------------------------------------------------------------------------- بعد كل دورة فوترة، يقوم Flowstep تلقائيًا بإنشاء فاتورة لدفعتك. يمكنك تنزيل الفواتير السابقة في أي وقت من خلال بوابة الفوترة. راجع [Invoices](https://docs.flowstep.ai/ar/invoices) للحصول على التعليمات. هل كانت هذه الصفحة مفيدة؟ نعملا [تسعير Flowstep: فترة تجريبية مجانية، طبقة مجانية، وخطط مدفوعة\ \ السابق](https://docs.flowstep.ai/ar/pricing) [المقاعد والفوترة لكل مقعد لفرق Flowstep\ \ التالي](https://docs.flowstep.ai/ar/seats) ⌘I --- # Flowstep-organisationer: teams, roller og tilladelser - Flowstep > Documentation Index > ------------------- > > Fetch the complete documentation index at: [/llms.txt](https://docs.flowstep.ai/llms.txt) > > Use this file to discover all available pages before exploring further. [Spring til hovedindhold](https://docs.flowstep.ai/da/organizations#content-area) Hver Flowstep-konto tilhører en organisation. Når du registrerer dig, opretter Flowstep automatisk en for dig — og når du tilføjer holdkolleger, deltager de i din organisation og kan arbejde med dens filer baseret på deres rolle. [​](https://docs.flowstep.ai/da/organizations#s%C3%A5dan-fungerer-organisationer) Sådan fungerer organisationer ------------------------------------------------------------------------------------------------------------------ Filer bliver opbevaret inde i en organisation, ikke på en personlig konto. Når du opretter en ny fil, bliver den oprettet i den organisation, du i øjeblikket har valgt, og alle i den organisation kan se den ifølge deres rolle og filens [delingsindstillinger](https://docs.flowstep.ai/da/sharing-designs) . Hvis du tilhører mere end en organisation, vises en organisationsskifter i headeren. Skift af organisation ændrer hele dit arbejdsplads-kontekst: * **All files** (Alle filer) og **Created by me** (Oprettet af mig) på startsiden viser filer fra den valgte organisation. * **Shared with me** (Delt med mig) viser filer, der er delt med dig fra organisationer, du ikke er medlem af. [​](https://docs.flowstep.ai/da/organizations#roller) Roller --------------------------------------------------------------- Flowstep-organisationer har fire roller: | Rolle | Bruger en plads | Hvad de kan gøre | | --- | --- | --- | | **Owner** | Ja | Alt hvad Admins kan gøre, plus styre abonnementet, pladser og fakturering. Owner er den person, som oprettede organisationen. | | **Admin** | Ja | Kan vise og redigere alle filer inden for organisationen. Kan ændre organisationsindstillinger og invitere nye medlemmer. | | **Member** | Ja | Kan vise og redigere alle filer inden for organisationen. Kan ikke ændre organisationsindstillinger eller invitere nye medlemmer. | | **Guest** | Nej | Skrivebeskyttet adgang til designs, der er delt med dem. Gæster kan ikke redigere noget i din organisation. | Filadgang styres også af hver fils delingsindstillinger — filer indstillet til **Restricted** (Begrænset) kan kun åbnes af de personer, som de er delt med. Se [Deling af designs](https://docs.flowstep.ai/da/sharing-designs) . Hver organisation har præcis en Owner — den person, som oprettede den. Rollen Owner kan ikke overføres eller fjernes i appen, og kun Owner kan styre fakturering. Se [Fakturering](https://docs.flowstep.ai/da/billing) for detaljer. [​](https://docs.flowstep.ai/da/organizations#g%C3%A6ster) Gæster -------------------------------------------------------------------- Guests (gæster) er personer, som fik visningsadgang til dine designs — for eksempel en interessent, som du inviterede til at gennemgå en fil. Gæsteadgang er skrivebeskyttet: Guests kan ikke redigere noget i din organisation. * Guests er gratis: de bruger aldrig en betalt [plads](https://docs.flowstep.ai/da/seats) . * Nogen bliver en Guest ved at acceptere en visningsopfordring til en af dine filer. Der er ingen måde at invitere en Guest direkte fra organisationsindstillinger — gæsteadgang starter altid fra deling af en fil. Se [Deling af designs](https://docs.flowstep.ai/da/sharing-designs) . * Ved et betalt abonnement kan Owner opgradere en Guest til et fuldt Member fra **Settings → People** (Indstillinger → Personer). Dette tilføjer en betalt plads til dit abonnement. Se [Organisationsindstillinger](https://docs.flowstep.ai/da/organization-settings) . [​](https://docs.flowstep.ai/da/organizations#inaktive-medlemmer) Inaktive medlemmer --------------------------------------------------------------------------------------- Et medlem har brug for en betalt plads for at beholde redigeringsadgang. Hvis din organisation har flere medlemmer end pladser — for eksempel efter at have inviteret personer på det gratis abonnement — er medlemmerne uden en plads markeret **Inactive** (Inaktiv) og får skrivebeskyttet adgang, indtil en plads bliver tilgængelig. Ved et betalt abonnement synkroniseres pladser normalt automatisk, når Owner tilføjer personer. Hvis medlemmer vises som **Inactive** (Inaktiv), kan Owner klikke på **Fix** (Ret) på siden **Settings → People** (Indstillinger → Personer) for at gendanne deres adgang — eller opgradere til et betalt abonnement, hvis din organisation er på det gratis abonnement. Se [Pladser](https://docs.flowstep.ai/da/seats) for at se, hvordan pladser fungerer. [​](https://docs.flowstep.ai/da/organizations#deltag-i-en-organisation) Deltag i en organisation --------------------------------------------------------------------------------------------------- Du deltager i en organisation gennem en e-mailinvitation. Klik på linket i invitationsmails, og du tilføjes med den rolle, du blev inviteret som — hvis du endnu ikke har en Flowstep-konto, oprettes en automatisk for dig, og klik på invitationslinket logger dig ind. Efter tilslutning vises organisationen i din organisationsskifter. [​](https://docs.flowstep.ai/da/organizations#hvor-du-skal-g%C3%A5-hen-n%C3%A6ste) Hvor du skal gå hen næste --------------------------------------------------------------------------------------------------------------- Organisationsindstillinger -------------------------- Tilføj medlemmer, skift roller, styr gæster og omdøb din organisation. Pladser ------- Hvordan fakturering pr. plads fungerer for teams. Var denne side nyttig? JaNej [Del Flowstep-designs med dit team og interessenter\ \ Forrige](https://docs.flowstep.ai/da/sharing-designs) [Administrer din organisation: mennesker, roller og indstillinger\ \ Næste](https://docs.flowstep.ai/da/organization-settings) ⌘I --- # Flowstep MCP — Claude Code - Flowstep > Documentation Index > ------------------- > > Fetch the complete documentation index at: [/llms.txt](https://docs.flowstep.ai/llms.txt) > > Use this file to discover all available pages before exploring further. [Pular para o conteúdo principal](https://docs.flowstep.ai/pt-BR/mcp/clients/claude-code#content-area) [​](https://docs.flowstep.ai/pt-BR/mcp/clients/claude-code#configura%C3%A7%C3%A3o) Configuração -------------------------------------------------------------------------------------------------- Adicione o servidor às suas configurações do Claude Code. Use o arquivo de configurações global para habilitá-lo em qualquer lugar ou adicione-o por projeto. * Global (~/.claude/settings.json) * Project (.claude/settings.json) { "mcpServers": { "flowstep-production": { "type": "http", "url": "https://api.flowstep.ai/mcp" } } } { "mcpServers": { "flowstep-production": { "type": "http", "url": "https://api.flowstep.ai/mcp" } } } Alternativamente, use a CLI: claude mcp add --transport http flowstep-production https://api.flowstep.ai/mcp [​](https://docs.flowstep.ai/pt-BR/mcp/clients/claude-code#autentica%C3%A7%C3%A3o) Autenticação -------------------------------------------------------------------------------------------------- Claude Code gerencia o fluxo OAuth 2.1 PKCE automaticamente na primeira vez que chama uma ferramenta Flowstep. Seu navegador abre para `https://api.flowstep.ai/oauth/authorize`. Faça login com suas credenciais Flowstep e a CLI captura o callback. Você precisa de uma conta Flowstep antes de autenticar. Crie uma em [app.flowstep.ai](https://app.flowstep.ai/) . [​](https://docs.flowstep.ai/pt-BR/mcp/clients/claude-code#verificar-a-conex%C3%A3o) Verificar a conexão ----------------------------------------------------------------------------------------------------------- claude mcp list O servidor deve aparecer como conectado. Então, em uma sessão do Claude Code: List my Flowstep files [​](https://docs.flowstep.ai/pt-BR/mcp/clients/claude-code#exemplo-de-uso) Exemplo de uso -------------------------------------------------------------------------------------------- Create a Flowstep file called "Settings page", generate a desktop settings screen for a developer tool with sections for API keys, notifications, and team members. Show me the rendered image when done. Esta página foi útil? SimNao [Flowstep MCP — Cursor\ \ Anterior](https://docs.flowstep.ai/pt-BR/mcp/clients/cursor) [Flowstep MCP — Windsurf\ \ Próximo](https://docs.flowstep.ai/pt-BR/mcp/clients/windsurf) ⌘I --- # Set design guidelines to keep every Flowstep generation on-brand - Flowstep > Documentation Index > ------------------- > > Fetch the complete documentation index at: [/llms.txt](https://docs.flowstep.ai/llms.txt) > > Use this file to discover all available pages before exploring further. [Skip to main content](https://docs.flowstep.ai/design-guidelines#content-area) Design guidelines let you set standing rules — colors, typography, spacing, component conventions — that Flowstep applies to every AI generation and edit in a file. Instead of repeating “use our blue theme” in every prompt, write it down once and the AI follows it from then on. [​](https://docs.flowstep.ai/design-guidelines#edit-your-design-guidelines) Edit your design guidelines ---------------------------------------------------------------------------------------------------------- 1 Open the Design guidelines modal In the chat panel header, click the **Edit design guidelines** button. The **Design guidelines** modal opens with a `DESIGN.md` text editor. 2 Write or import your guidelines Type your guidelines directly, or drag and drop a `.md` file into the editor to import it. The format follows Google’s open `design.md` standard — optional YAML front matter (recognized keys: `version`, `name`, `description`, `colors`, `typography`, `rounded`, `spacing`, `components`) followed by Markdown sections. 3 Save Click **Save changes**. From now on, every generation and edit in this file uses your guidelines as mandatory context. Guidelines apply to **future output only** — existing designs stay as they are. They are scoped to the current file and don’t carry over to other files. [​](https://docs.flowstep.ai/design-guidelines#good-to-know) Good to know ---------------------------------------------------------------------------- * **Length limit** — guidelines can be up to 50,000 characters. Imported files beyond that are truncated. * **Validation** — structural errors (unclosed YAML front matter, duplicate `##` section headings) block saving. Softer issues, like unrecognized YAML keys or colors that aren’t valid hex codes, show warnings but still save. * **Export** — use the **Copy raw file** and **Download** buttons in the modal to copy or download your `DESIGN.md`. * **Removing guidelines** — clear the text field and save to remove the guidelines for that file. [​](https://docs.flowstep.ai/design-guidelines#flowstep-updates-guidelines-for-you) Flowstep updates guidelines for you -------------------------------------------------------------------------------------------------------------------------- When you give a standing style instruction in a prompt — for example, “from now on, use a blue theme” — Flowstep detects it and updates your design guidelines automatically, confirming in the chat: “Updated your design guidelines to use \[style\] for future generations.” One-off requests like “make it blue” don’t change the guidelines; they only affect that generation. [​](https://docs.flowstep.ai/design-guidelines#design-guidelines-over-mcp) Design guidelines over MCP -------------------------------------------------------------------------------------------------------- If you work through the [MCP server](https://docs.flowstep.ai/mcp/overview) , the `get-design-guidelines`, `update-design-guidelines`, and `delete-design-guidelines` tools read and write the same guidelines — so your IDE workflow and the web app stay in sync. See the [Tools reference](https://docs.flowstep.ai/mcp/tools) . Was this page helpful? YesNo [Use references to guide and speed up Flowstep designs\ \ Previous](https://docs.flowstep.ai/design-references) [Preview Flowstep designs as interactive prototypes\ \ Next](https://docs.flowstep.ai/prototypes) ⌘I --- # MCP-användningsgränser - Flowstep > Documentation Index > ------------------- > > Fetch the complete documentation index at: [/llms.txt](https://docs.flowstep.ai/llms.txt) > > Use this file to discover all available pages before exploring further. [Hoppa till huvudinnehåll](https://docs.flowstep.ai/sv/mcp/usage-limits#content-area) Flowsteps användningsgränser tillämpas på **organisationsnivå** och **delas** mellan webbappen och MCP-servern. En generering som startas i Cursor räknas mot samma kvot som en som startas från app.flowstep.ai. [​](https://docs.flowstep.ai/sv/mcp/usage-limits#hur-gr%C3%A4nser-fungerar) Hur gränser fungerar --------------------------------------------------------------------------------------------------- Gränser är per funktion (den primära funktionen är `messages`). Varje plan definierar: * En **daglig gräns** — återställs kl. **00:00 UTC** varje dag * En **månatlig gräns** — återställs på **datumen för kontoanmälan eller betald prenumerationsstart varje månad** Att nå någon av gränserna blockerar ytterligare generationer tills den återställs. [​](https://docs.flowstep.ai/sv/mcp/usage-limits#kontrollera-din-kvot) Kontrollera din kvot ---------------------------------------------------------------------------------------------- Anropa `get-plan-details` för att se dina nuvarande gränser, användning och återstående kvot: // Response (excerpt) { "limits": { "messages": { "daily": { "max": 50, "warn": 40 }, "monthly": { "max": 500, "warn": 400 }, "unlimited": false } }, "usage": { "messages": { "daily": 12, "monthly": 87 } }, "remaining": { "messages": { "daily": 38, "monthly": 413 } } } De faktiska gränsvärdena beror på din plan. Kör verktyget för att se dina specifika tal. Se [Pricing](https://flowstep.ai/pricing) för detaljer per plan. [​](https://docs.flowstep.ai/sv/mcp/usage-limits#gr%C3%A4nser-per-beg%C3%A4ran-alla-planer) Gränser per begäran (alla planer) -------------------------------------------------------------------------------------------------------------------------------- Dessa gränser tillämpas på begärandesnivå oavsett plan: | Gräns | Värde | | --- | --- | | Max bilagor per `create-new-design` / `edit-design`\-anrop | 5 | | Max bilaga-storlek | 3 MB | | Bilagetyper som stöds | `image/jpeg`, `image/png`, `image/webp`, `application/pdf` (base64), plus text/kod-filer — `.html`, `.htm`, `.js`, `.ts`, `.jsx`, `.tsx` — som ren UTF-8 | | Genererings-timeout (`create-new-design`, `edit-design`, `regenerate-design`, `expand-design`) | 180 sekunder | [​](https://docs.flowstep.ai/sv/mcp/usage-limits#misslyckade-generationer-r%C3%A4knas-inte) Misslyckade generationer räknas inte ----------------------------------------------------------------------------------------------------------------------------------- Om en genereringsbegäran misslyckas — på grund av timeout, serverfel eller ogiltig inmatning — förbrukar den **inte** ett meddelande. Var denna sida till hjälp? JaNej [Flowstep MCP — claude.ai\ \ Föregående](https://docs.flowstep.ai/sv/mcp/clients/claude-ai) [MCP-exempel\ \ Nästa](https://docs.flowstep.ai/sv/mcp/examples) ⌘I --- # Flowstep MCP — Windsurf - Flowstep > Documentation Index > ------------------- > > Fetch the complete documentation index at: [/llms.txt](https://docs.flowstep.ai/llms.txt) > > Use this file to discover all available pages before exploring further. [Přejít na hlavní obsah](https://docs.flowstep.ai/cs/mcp/clients/windsurf#content-area) [​](https://docs.flowstep.ai/cs/mcp/clients/windsurf#konfigurace) Konfigurace -------------------------------------------------------------------------------- Upravte `~/.codeium/windsurf/mcp_config.json`: { "mcpServers": { "flowstep": { "serverUrl": "https://api.flowstep.ai/mcp" } } } Po uložení restartujte Windsurf. [​](https://docs.flowstep.ai/cs/mcp/clients/windsurf#ov%C4%9B%C5%99en%C3%AD) Ověření --------------------------------------------------------------------------------------- Při prvním použití Windsurf otevře váš prohlížeč na přihlašovací stránku OAuth služby Flowstep. Přihlaste se pomocí svých pověření Flowstep (email/heslo nebo Google SSO) a Windsurf uloží token. Před připojením potřebujete účet Flowstep. Vytvořte si jej na [app.flowstep.ai](https://app.flowstep.ai/) . [​](https://docs.flowstep.ai/cs/mcp/clients/windsurf#ov%C4%9B%C5%99en%C3%AD-p%C5%99ipojen%C3%AD) Ověření připojení --------------------------------------------------------------------------------------------------------------------- Otevřete panel MCP ve Windsurfu a potvrďte, že je Flowstep uveden. V chatu Cascade: List my Flowstep files [​](https://docs.flowstep.ai/cs/mcp/clients/windsurf#p%C5%99%C3%ADklad-pou%C5%BEit%C3%AD) Příklad použití ------------------------------------------------------------------------------------------------------------ Create a Flowstep file called "Empty states", then generate a mobile empty-state screen for a task list app with an illustration placeholder and a call-to-action button. Show me the rendered result. Byla tato stránka užitečná? AnoNe [Flowstep MCP — Claude Code\ \ Předchozí](https://docs.flowstep.ai/cs/mcp/clients/claude-code) [Flowstep MCP — Claude Desktop\ \ Další](https://docs.flowstep.ai/cs/mcp/clients/claude-desktop) ⌘I ---