mirror of
https://github.com/nexu-io/open-design.git
synced 2026-10-27 09:51:12 +01:00
Tom HuangGitHubopen-design-bot[bot] <282769551+open-design-bot[bot]@users.noreply.github.com>qiongyu1999Siri-Ray* feat(daemon): add interactive terminal support with node-pty - Introduced a new terminal service to manage interactive terminal sessions. - Added routes for creating, streaming, and managing terminal sessions in the daemon. - Integrated terminal functionality into the CLI, allowing users to open interactive shells. - Updated project routes to support conversation seeding for side chats. - Enhanced the web application to include terminal tab functionality and UI components. This feature enables users to interact with a terminal directly within the application, enhancing the overall user experience and providing a more integrated development environment. * feat(web): implement embedded browser module in Design Files workspace - Added a `+` icon to the Design Files tab for opening a new Browser module. - The Browser module supports navigation features including back, forward, refresh, and address input. - Integrated a curated list of design reference URLs for user convenience. - Implemented browser data clearing functionality via IPC. - Enhanced desktop runtime to support embedded browser with appropriate security measures. - Added tests for browser functionality and URL handling. This commit establishes a new workspace for browsing and referencing design resources directly within the application, improving user experience and accessibility to design tools. * refactor(web): enhance add tab menu functionality in FileWorkspace - Updated the add tab button to toggle the visibility of the menu with improved accessibility attributes. - Refactored the add menu to be portaled to the document body for better positioning and visibility. - Adjusted CSS styles for the add menu to use fixed positioning and increased z-index for proper layering. - Minor CSS adjustments in entry layout for consistent padding. These changes improve the user experience when adding new modules in the FileWorkspace, ensuring the add menu is more accessible and visually consistent. * feat(daemon): introduce session mode for conversations - Added a new `session_mode` column to the `conversations` table with a default value of 'design'. - Implemented logic to handle `session_mode` in conversation creation, updates, and retrieval. - Enhanced the API to support `session_mode` in conversation requests, allowing for 'chat' or 'design' modes. - Updated the web application to include a session mode toggle, enabling users to switch between chat and design modes seamlessly. - Adjusted system prompts to reflect the current session mode, providing context-aware responses. This feature enhances the user experience by allowing for more flexible conversation management, catering to different interaction styles. * feat(web): enhance navigation and settings functionality in DesignBrowserPanel and EntryShell - Introduced a navigation stack in DesignBrowserPanel to manage back and forward navigation states. - Updated the browser navigation logic to handle URL history and improve user experience. - Added a settings menu in EntryShell for quick access to language and appearance options. - Implemented CSS styles for the new settings menu, ensuring a consistent and user-friendly interface. - Enhanced tests for navigation functionality and settings menu interactions. These changes improve the overall usability of the application by streamlining navigation and providing easy access to settings. * feat(daemon): enhance conversation session mode handling - Added a new `mode` flag to CLI commands for project and conversation creation, allowing users to specify 'design' or 'chat' modes. - Implemented `normalizeChatSessionModeFlag` function to validate and normalize session mode inputs. - Updated project routes to handle session mode during conversation creation and updates. - Enhanced web components to support session mode changes, including new props and handlers for managing session modes in conversations. - Adjusted UI elements to reflect the current session mode, improving user experience and interaction flexibility. This update provides a more robust framework for managing conversation modes, catering to diverse user needs and enhancing overall functionality. * feat(web): enhance HandoffButton and DesignBrowserPanel with improved functionality and styling - Updated HandoffButton to support framework-specific CLI prompts and improved local project path handling. - Enhanced DesignBrowserPanel to manage browser history with favicon support and improved address display. - Introduced new utility functions for formatting addresses and extracting hostnames. - Refactored CSS styles for better layout and responsiveness across components. - Added tests for new functionalities in HandoffButton and DesignBrowserPanel, ensuring robust behavior. These changes improve user experience by streamlining the handoff process and enhancing the design browsing capabilities within the application. * feat(web): enhance HandoffButton and ProjectView with improved instructions handling and UI updates - Updated HandoffButton to include a tabbed interface for switching between editor and CLI options, enhancing user experience. - Added support for opening the AMR website directly from the HandoffButton. - Refactored ProjectView to implement a modal for custom instructions, allowing users to edit and review instructions more intuitively. - Improved CSS styles for project instructions modal and handoff menu, ensuring better layout and responsiveness. - Added keyboard accessibility for closing the instructions modal with the Escape key. These changes streamline the handoff process and improve the usability of custom instructions within the application. * feat(daemon): add social share functionality and project folder management - Introduced new `share` command in CLI for building localized social-share targets for Open Design projects. - Implemented `printShareUsage` and `runShare` functions to handle share requests and display usage instructions. - Added API routes for social sharing, allowing users to create shareable links for projects. - Enhanced project routes with new endpoints for listing and creating project folders, improving project organization. - Updated relevant files and tests to support new functionalities, ensuring robust behavior. These changes enhance user experience by facilitating social sharing and better project management within the application. * feat(web): enhance DesignBrowserPanel and DesignFilesPanel with improved address formatting and drag-and-drop functionality - Refactored `formatAddressDisplay` to utilize a new `formatAddressDisplayParts` function, separating URL and title handling for better clarity. - Updated `DesignFilesPanel` to improve drag-and-drop interactions, including enhanced directory navigation and file management features. - Adjusted CSS styles for better visual consistency and responsiveness across components. - Added tests for new functionalities in `DesignBrowserPanel` and `DesignFilesPanel`, ensuring robust behavior. These changes improve user experience by streamlining address formatting and enhancing file management capabilities within the application. * feat(web): enhance DesignBrowserPanel and DesignFilesPanel with new reference categories and improved folder creation - Added new reference categories in DesignBrowserPanel, including 'Inspiration', 'Real Interfaces', 'Color', 'Typography', and more, each with curated design resources. - Improved folder creation logic in DesignFilesPanel to suggest names based on existing folders, enhancing user experience. - Updated CSS styles for better layout and responsiveness across components, particularly in control rows and search functionalities. - Added tests for new reference categories and folder creation features, ensuring robust functionality. These changes enrich the design resource catalog and streamline folder management, improving overall usability within the application. * feat(web): implement reference icon functionality and enhance social share features - Replaced favicon URL generation with a new `referenceIconUrl` function to provide reliable icons for curated design sites, improving visual consistency in the DesignBrowserPanel. - Updated the FileViewer component to enhance social share functionality, including clearer messaging for protected deployments and improved UI for sharing links. - Added CSS styles to support new visual states for social share components, ensuring better user experience. - Expanded tests for the new `referenceIconUrl` function and social share interactions, ensuring robust functionality. These changes enhance the design resource presentation and improve the sharing experience within the application. * feat(web): enhance DesignFilesPanel and FileViewer with improved folder management and social share functionality - Added optimistic folder path management in DesignFilesPanel to improve user experience during folder creation. - Updated social share logic in FileViewer to handle protected deployments more effectively, ensuring clearer messaging and UI updates. - Refactored CSS styles for better layout and responsiveness in both components, enhancing overall usability. - Expanded tests for new folder management features and social share interactions, ensuring robust functionality. These changes streamline folder management and enhance the social sharing experience within the application. * feat(daemon): enhance project tab management with new state handling - Updated database schema to include a new `state_json` column in the `tabs_state` table for improved project tab state management. - Implemented functions to normalize and parse project tab states, including handling browser workspace tabs. - Modified `listTabs` and `setTabs` functions to utilize the new state management features, allowing for better tracking of active tabs and saved states. - Refactored related types in the contracts and web applications to support the new tab state structure. These changes improve the functionality and user experience of managing project tabs within the application. * feat(web): enhance project tab management and browser tab functionality - Updated project routes and server logic to include `browserTabs` in the request body, improving tab state management. - Implemented validation for `browserTabs` to ensure it is an array, enhancing error handling. - Refactored `setTabs` function to accommodate the new structure for managing tabs, including browser-specific tabs. - Added tests for browser tab state persistence and management in the new `project-tabs-state.test.ts` file, ensuring robust functionality. These changes improve the user experience by providing better management and persistence of project and browser tabs within the application. * feat(web): enhance ProjectView with improved chat send management and UI updates - Added support for queue-only chat sends, allowing for better handling of messages during busy conversations. - Refactored chat send functions to improve state management and persistence of queued messages. - Updated CSS styles in the DesignFilesPanel for better layout and responsiveness, including search control enhancements. - Expanded tests for new chat send functionalities and search interactions, ensuring robust behavior. These changes improve the user experience by streamlining chat interactions and enhancing the overall design file management interface. * feat(web): improve project tab state management and caching - Enhanced the `loadTabs` function to utilize cached tab states, improving performance and user experience during data fetching. - Implemented `normalizeTabsState` and caching functions to manage tab states effectively, including validation and error handling. - Updated `writeCachedTabs` to ensure the latest state is stored in local storage, facilitating better persistence of tab information. - Modified `listTabs` in the daemon to include `updatedAt` in the state retrieval, allowing for more accurate tracking of tab updates. These changes streamline tab management and enhance the overall responsiveness of the application. * feat(web): integrate Lexical for enhanced text composition and mention handling - Added Lexical as a dependency to improve text composition capabilities within the chat interface. - Implemented mention functionality with the creation of `MentionNode` and related serialization/deserialization logic for inline mentions. - Enhanced `ChatComposer` and `ChatPane` components to support queue-only message sending and improved state management for queued messages. - Updated `DesignBrowserPanel` and `PreviewDrawOverlay` to incorporate new features for capturing and annotating browser snapshots. - Refactored various components to streamline interactions and improve user experience during chat and design tasks. These changes significantly enhance the text editing experience and provide better management of chat interactions, improving overall usability in the application. * feat(workspace): integrate terminal viewer and enhance chat functionality - Added a new terminal viewer component with customizable themes and improved styling for better user experience. - Integrated terminal functionality into the workspace, allowing users to interact with a terminal directly within the application. - Updated chat components to support active conversation states, enabling seamless message handling and interaction. - Refactored chat-related props and state management to enhance performance and maintainability. - Removed deprecated file tree explorer components to streamline the workspace interface. This update enhances the overall functionality of the workspace, providing users with a more integrated and responsive environment for both terminal and chat interactions. * feat(workspace): enhance chat and session mode functionality - Introduced a new `+` launcher in the workspace for easy access to project files and new tabs, including Side Chat and Terminal. - Added Side Chat functionality that allows users to create context-aware conversations based on existing chats. - Implemented a new terminal tab type for interactive terminal sessions using `node-pty`, enabling users to run shell commands directly within the workspace. - Enhanced chat functionality with a new session mode toggle, allowing users to switch between 'design' and 'chat' modes seamlessly. - Added a feature to copy chat responses as markdown to the clipboard, improving usability and sharing capabilities. - Updated various components and styles to support these new features, ensuring a cohesive user experience. This update significantly improves the workspace's interactivity and usability, providing users with more tools for collaboration and development. * feat(workspace): enhance session mode toggle and chat functionality - Improved the SessionModeToggle component to include localized guidance cards that provide context-aware descriptions for each mode. - Updated the UI to display a popover with mode descriptions when hovering over options, enhancing user understanding of the available modes. - Added a new copy button in the AssistantMessage footer to allow users to copy responses as raw Markdown, improving usability for external documentation. - Enhanced localization support by updating i18n keys and translations for various languages, ensuring consistent user experience across different locales. - Refactored styles for the session mode toggle and associated components to improve layout and responsiveness. This update significantly enhances the user experience by providing clearer guidance and improved functionality in chat interactions. * feat(styles): enhance session mode toggle styling for improved visibility - Added new CSS rules to ensure the session mode toggle popover and hover cards are displayed correctly with increased z-index and visibility. - Updated styles for various chat components to maintain consistent positioning and overflow behavior when session mode elements are present. - Improved overall layout responsiveness for chat interactions, enhancing user experience during mode transitions. This update refines the visual presentation of session mode toggles, ensuring they are more accessible and user-friendly. * feat(web): finish Lexical composer input with atomic mention pills * fix(web): make browser reference board scroll with a pinned toolbar The browser tab's default Reference Board (.db-start) is wrapped by PreviewDrawOverlay's position:absolute container, which is not a flex parent — so .db-start's flex:1 1 auto never bounded its height and the board grew to its content height instead of scrolling (and the sticky .db-reference-toolbar could not pin). Fill the overlay with height:100% like the .db-webview/.db-fallback siblings already do, restoring scroll and the sticky toolbar. * test(daemon): expect updatedAt in persisted tab state round-trip listTabs() returns the tabs_state row's updatedAt timestamp on the saved-state path, but these two toEqual assertions predated that field and failed strictly. Match the real shape with expect.any(Number). * feat(chat): enhance ChatComposer with session mode management and UI improvements - Introduced a new `sessionMode` prop to the ChatComposer, allowing users to switch between different session modes (e.g., 'design'). - Added a SessionModeToggle component for improved user interaction and visibility of session options. - Updated the ToolsTab type to reflect the removal of the pet option, streamlining the tools available in the composer. - Refactored styles to enhance the visibility and positioning of session mode elements, ensuring a better user experience during mode transitions. - Improved the handling of draft state and user interactions within the composer, enhancing overall functionality. These changes significantly improve the ChatComposer's usability and flexibility, providing users with clearer options and a more responsive interface. * feat(chat): implement caret floating layer for mention and slash popovers - Introduced a new `CaretFloatingLayer` component to manage the positioning of mention and slash command popovers relative to the caret. - Enhanced `ChatComposer` to utilize the caret rectangle for accurate popover placement, improving user experience during text input. - Updated `LexicalComposerInput` to pass caret position data to the trigger handling logic, allowing for dynamic popover adjustments. - Refactored styles for popovers to ensure consistent appearance and behavior, including improved animations and responsiveness. - Added accessibility features to mention and slash popovers, enhancing usability for keyboard navigation. These changes significantly improve the interaction model for mentions and commands within the chat interface, providing a more intuitive and responsive user experience. * feat(chat): update mention tab order and improve search functionality - Reordered the mention tab sections in the ChatComposer to prioritize 'Design files' over other categories, enhancing user experience during mentions. - Updated the search prompt to reflect the new tab order, ensuring clarity in search functionality. - Enhanced the mention selection logic to accommodate the new tab structure, allowing for a more intuitive navigation experience. - Added tests to verify the correct display and functionality of the updated mention tabs and search behavior. These changes significantly improve the usability of the mention feature within the chat interface, making it easier for users to find and select relevant items. * feat(chat): enhance context management in ChatComposer and HomeHero - Added functionality to manage MCP servers and connectors within the ChatComposer, allowing users to remove these contexts seamlessly. - Updated the HomeHero component to support the selection and removal of MCP servers and connectors, improving context handling in user interactions. - Enhanced the search prompt to include files, ensuring users can search across all relevant categories. - Refactored related components and styles for better integration and user experience. - Added tests to verify the correct functionality of the new context management features. These changes significantly improve the usability of context features in the chat interface, making it easier for users to manage their interactions effectively. * feat(chat): enhance message handling with session mode and plugin snapshot support - Added new columns to the database schema for `session_mode` and `applied_plugin_snapshot_json` to support enhanced message context. - Updated the `upsertMessage` and `listMessages` functions to handle the new fields, ensuring messages can store and retrieve session mode and plugin snapshot data. - Enhanced the `ChatComposer` to manage and send the applied plugin snapshot as part of the message context, improving user interaction with plugins. - Introduced a new `MessageSessionModeChip` component to visually represent the session mode in the chat interface. - Updated styles for better presentation of session mode and plugin context within messages, enhancing user experience. These changes significantly improve the context management capabilities in the chat interface, allowing for richer interactions and better tracking of session-specific data. * feat(chat): add annotation handling and UI improvements in ChatComposer and PreviewDrawOverlay - Implemented functionality to stage draw annotations into the composer input without sending, enhancing user interaction. - Added a new button in the PreviewDrawOverlay to allow users to append notes to the input, improving workflow flexibility. - Updated the ChatComposer tests to verify the correct staging of annotations and their integration into the input. - Enhanced internationalization support by adding new translation keys for annotation actions across multiple languages. These changes significantly improve the user experience by providing more intuitive annotation handling and better integration within the chat interface. * feat(capture): implement page capture functionality and enhance folder management dialogs - Added new capture functionality to allow users to take snapshots of the current page, improving user interaction with visual content. - Introduced in-app dialogs for folder creation and moving files, replacing the unsupported window.prompt in the Electron desktop host, enhancing usability across platforms. - Updated the DesignFilesPanel to support these new dialogs, ensuring a seamless experience for managing project files. - Enhanced internationalization support by adding new translation keys for folder management actions across multiple languages. These changes significantly improve the user experience by providing intuitive capture options and streamlined file management within the application. * feat(projects): implement folder deletion and enhance project file management - Added a new API endpoint to delete project folders, improving the file management capabilities within the application. - Introduced utility functions for ensuring project subdirectories and safely deleting folders, enhancing the robustness of folder operations. - Updated the DesignFilesPanel and FileWorkspace components to support folder deletion actions, providing users with a more intuitive interface for managing project files. - Enhanced internationalization support by adding new translation keys for folder management actions. These changes significantly improve the user experience by streamlining folder management and providing clearer options for users to organize their projects effectively. * feat(composer): enhance BoardComposerPopover with image attachment functionality - Added support for attaching images to comments, allowing users to upload and preview images directly within the composer. - Implemented new handlers for image input changes and clipboard pasting, improving the user experience for image uploads. - Updated the component's props to include image-related callbacks and state management for attached images. - Enhanced styles for image thumbnails and removal buttons, ensuring a cohesive design with the existing comment popover interface. These changes significantly improve the functionality of the BoardComposerPopover, providing users with a more interactive and visually rich commenting experience. * feat(file-viewer): enhance comment attachment functionality with image support - Updated the `onSendBoardCommentAttachments` prop to accept an additional `images` parameter, allowing for image attachments alongside comments. - Introduced state management for handling attached images, including functions to add and remove images, and to generate previews. - Implemented a modal for previewing attached images, improving user interaction when managing comment attachments. - Updated the `FileWorkspace` component to reflect changes in the props, ensuring consistency across components. These enhancements significantly improve the commenting experience by enabling users to attach and preview images directly within the file viewer. * feat(home-hero, project-view, styles): enhance functionality and user experience - Updated the HomeHero component to prevent unnecessary state changes during programmatic updates, improving user interaction with prompts. - Enhanced the ProjectView component to support image attachments alongside comments, allowing for a more versatile commenting experience. - Implemented a new image upload process that queues tasks efficiently, ensuring smooth handling of comment attachments. - Added CSS to reserve scrollbar space in design files, preventing layout shifts when scrollbars appear, thus enhancing visual stability. These changes collectively improve the user experience by streamlining interactions and ensuring consistent UI behavior across components. * feat(preview-comments, chat): enhance comment functionality with attachment support - Added support for `attachments_json` in the `preview_comments` table, allowing users to attach files to comments. - Updated relevant functions to handle attachments, including `upsertPreviewComment` and `listPreviewComments`, ensuring attachments are properly managed and displayed. - Enhanced the `CommentSidePanel` to render attached files, providing users with a visual representation of their attachments. - Improved the `BoardComposerPopover` and `ChatPane` components to support image attachments, including drag-and-drop functionality for reordering queued sends. These changes significantly enhance the commenting experience by enabling users to attach and manage files directly within the chat interface, improving overall usability and interaction. * refactor(comment-attachments): rename attachment normalization functions for clarity - Updated the `normalizeCommentAttachments` function to `normalizePreviewCommentAttachments` for better context in handling preview comment attachments. - Adjusted the `upsertPreviewComment` and `normalizePreviewComment` functions to utilize the renamed attachment normalization function. - Added tests to ensure that image attachments are correctly saved and retrieved, addressing a regression issue with attachment persistence. These changes enhance code clarity and maintainability while ensuring the functionality for handling comment attachments remains robust. * feat(comment-attachments): enhance comment submission with image and note validation - Updated the `upsertPreviewComment` function to require either a text note or at least one image attachment for comment submission, improving validation logic. - Modified the `BoardComposerPopover` to allow saving comments with only images, enhancing user experience by simplifying the commenting process. - Adjusted the `FileViewer` to support saving comments with image-only notes, ensuring consistency across components. - Improved styles in the chat and home hero components for better visual representation of attachments and comments. These changes collectively enhance the commenting functionality, providing users with more flexibility in how they submit comments while ensuring robust validation. * feat(project-view): implement auto-start for queued chat sends - Replaced the `startingQueuedChatSendIdRef` with a state variable `queuedAutoStartBlocked` to manage the auto-start behavior of queued chat sends. - Updated the `useEffect` to ensure that queued sends are processed one at a time after the active conversation completes, enhancing the chat experience. - Added a test to verify that queued sends auto-start correctly after the active run finishes, ensuring reliable functionality. These changes improve the handling of queued chat messages, providing a smoother user experience during conversations. * feat(project-view): refine auto-start logic for queued chat sends - Replaced the state variable `queuedAutoStartBlocked` with a reference `startingQueuedChatSendIdRef` to manage the auto-start behavior of queued chat sends more effectively. - Updated the `useEffect` to ensure that queued sends are processed sequentially, improving the handling of chat messages during active conversations. - Introduced a new state variable `queuedAutoStartTick` to track the auto-start process, enhancing the responsiveness of the chat interface. These changes improve the reliability and user experience of the chat functionality by ensuring queued messages are handled smoothly and efficiently. * feat(comment-attachments): improve attachment handling in preview comments - Updated the `upsertPreviewComment` function to merge existing and incoming attachments, ensuring that image attachments are preserved when updating comments without new files. - Introduced a new helper function, `mergePreviewCommentAttachments`, to handle the merging of attachments without duplicates, enhancing the robustness of attachment management. - Added tests to verify the correct merging of attachments and the preservation of existing attachments during comment updates, improving overall functionality and user experience. These changes enhance the commenting system by providing better management of image attachments, ensuring users can update comments seamlessly while retaining their attached images. * feat(BoardComposerPopover): enhance popover positioning and measurement - Updated the `popoverAnchorStyle` function to incorporate viewport scroll positions, ensuring the popover remains within visible bounds. - Introduced a new `PopoverSize` type to manage measured dimensions, improving the accuracy of popover placement. - Implemented a `useLayoutEffect` to dynamically measure the popover size and adjust its position accordingly, enhancing user experience during interactions. - Added tests to verify that the popover correctly adjusts its position based on target and viewport dimensions, ensuring it remains fully visible. These changes improve the usability of the BoardComposerPopover by ensuring it is properly positioned within the viewport, enhancing the overall commenting experience. * feat(comment-attachments): enhance image attachment handling in comments - Updated the `normalizeCommentAttachments` function to include image attachments in the comment payload, allowing comments to be submitted with only images. - Introduced a fallback message for comments that consist solely of image attachments, improving user guidance. - Enhanced the `renderCommentAttachmentHint` function to display image attachment details, ensuring users are informed about attached images. - Added tests to verify that image attachments are preserved in comment submissions and correctly rendered in hints, improving overall functionality and user experience. These changes enhance the commenting system by providing better support for image-only comments, ensuring users can effectively utilize image attachments in their interactions. * feat(comment-attachments): refine comment context handling and enhance drag-and-drop functionality - Updated the `normalizeCommentAttachments` function to conditionally omit comment text when the context is set to 'query', improving clarity in comment submissions. - Enhanced the `renderCommentAttachmentHint` function to only display comments when not in 'query' context, ensuring a cleaner output. - Implemented drag-and-drop functionality in the `CommentSidePanel` for reordering comments, improving user interaction and organization of comments. - Added tests to verify the correct handling of comment context and the functionality of the drag-and-drop feature, ensuring robust performance. These changes enhance the commenting system by providing clearer context management and improved usability through drag-and-drop capabilities. * feat(FileViewer, ProjectView): enhance comment attachment handling and status updates - Updated the `FileViewer` component to manage the state of sent comment IDs, ensuring that active previews are correctly updated after sending comments. - Refined the `ProjectView` component to filter out comment attachments from the board-batch source and update their status to 'applying' during processing, improving user feedback on attachment handling. - Introduced logic to handle the removal of sent comment IDs from the preview, enhancing the overall user experience when managing comments and attachments. These changes improve the functionality and responsiveness of the commenting system, providing clearer feedback and better management of comment attachments. * feat(conversation-forking): introduce message-based conversation forking - Added the ability to fork conversations from a specific message, enhancing the chat experience by allowing users to create new conversations that inherit context up to a chosen point. - Updated the CLI commands and help documentation to reflect the new `--fork-after` option, which specifies the message ID to stop copying from. - Enhanced the backend to handle the new forking logic, ensuring that only messages up to the specified ID are included in the new conversation. - Implemented tests to verify the forking functionality, ensuring robust performance and correct behavior when forking conversations. These changes improve the flexibility of conversation management, allowing users to create tailored discussions based on previous interactions. * feat(terminal-service): enhance session output management and memory handling - Introduced new parameters for managing session output, including `maxBufferBytes`, `exitTailBytes`, `flushIntervalMs`, and `flushThresholdBytes`, to optimize memory usage and performance. - Implemented a `trimBuffer` function to efficiently evict old events based on byte and count limits, improving memory management during active sessions. - Added logic to coalesce buffered PTY output into single `data` events, reducing the frequency of event emissions and enhancing performance during high-throughput scenarios. - Updated session event structure to include `byteLength`, allowing for better tracking of output size and memory usage. These changes improve the efficiency and responsiveness of terminal sessions, ensuring better resource management and user experience. * feat(workspace-context): enhance project attachment handling and workspace context management - Introduced `formatProjectAttachmentHint` function to render project attachments in a user-visible order, improving clarity for users referencing attachments. - Added `normalizeWorkspaceContextItems` function to standardize workspace context items, ensuring consistent handling of various context types. - Updated `mergeRunContextSelections` to include workspace items, enhancing the context management during chat interactions. - Enhanced `renderRunContextPrompt` to display active workspace context, providing users with better visibility of their current workspace state. - Implemented tests for new functions to ensure robust functionality and correct behavior in handling project attachments and workspace contexts. These changes improve the user experience by providing clearer context and better management of project attachments within the application. * feat(database, chat): enhance message and conversation data structure - Added `run_context_json` to the `messages` table schema to store contextual information for each message. - Updated migration logic to include the new `run_context_json` field and ensure backward compatibility. - Enhanced conversation retrieval to include `messageCount`, providing better insights into the number of messages per conversation. - Improved attachment handling in the `ChatComposer` component by introducing ordering logic for attachments, ensuring a consistent user experience. - Refactored `SessionModeToggle` to simplify state management and improve tooltip visibility. These changes enhance data management and user interaction within the chat application, providing clearer context and improved functionality. * feat(attachment-handling): improve attachment sorting and context management - Introduced `sortAttachmentsByUserOrder` function to ensure attachments are displayed in a user-defined order, enhancing clarity and usability. - Updated `historyWithApiAttachmentContext` to utilize the new sorting function, improving the context provided with message histories. - Refactored `buildAnthropicMessageContent` to apply sorting for image attachments, ensuring consistent handling across different message types. These changes enhance the user experience by providing better organization and visibility of attachments within the chat application. * feat(chat): enhance conversation listing and loading states - Improved the SQL query for listing conversations to include message counts, providing better insights into conversation activity. - Added loading states to the ChatPane component, enhancing user experience during data fetching. - Implemented a search feature in the conversation history, allowing users to filter conversations by title for easier navigation. - Updated styles for loading indicators and conversation list to improve visual feedback during loading states. These changes enhance the usability and responsiveness of the chat interface, providing users with clearer context and improved interaction capabilities. * feat(chat): optimize suggestion filtering and enhance design system integration - Refactored suggestion filtering in the ChatComposer component to utilize `useMemo`, improving performance by memoizing results based on dependencies. - Added new props in ChatPane for handling plugin and design system details, enhancing the integration of these features within the chat interface. - Updated the FileWorkspace component to manage tab states for design system and browser tabs, improving user navigation and context management. - Introduced modals for displaying plugin and design system details in the ProjectView, enhancing user experience by providing contextual information. These changes improve the efficiency of suggestion handling and enhance the overall user experience in managing plugins and design systems within the chat application. * fix(chat): adjust styling and layout for improved chat interface - Reduced the conversation row height in ChatPane for better alignment with design specifications. - Updated CSS styles across various components to enhance layout consistency, including adjustments to margins, padding, and flex properties. - Improved visual feedback and responsiveness in chat elements, ensuring a more cohesive user experience. These changes refine the chat interface, making it more visually appealing and user-friendly. * feat(comments): implement structural equality checks for comment snapshots - Added `commentSnapshotOverlayEqual` and `commentSnapshotEqual` functions to compare comment snapshots based on their structural properties, improving performance by avoiding unnecessary state updates in the `FileViewer` component. - Updated `HtmlViewer` to utilize these equality checks, optimizing the handling of live comment targets during pointer movements and hover events. - Enhanced the overall responsiveness of the comment system by preventing redundant re-renders when comment snapshots remain unchanged. These changes enhance the efficiency of comment handling and improve user experience in the commenting interface. * feat(chat): enhance comment attachment sorting and order management - Introduced `sortChatCommentAttachmentsByOrder` function to ensure comment attachments are displayed in a user-defined order, improving clarity and usability. - Updated the `currentCommentAttachments` function to utilize the new sorting logic, enhancing the organization of attachments. - Adjusted the order assignment for visual attachments to ensure consistent handling based on existing attachment orders. These changes improve the user experience by providing better organization and visibility of comment attachments within the chat application. * feat(chat): enhance queued send strip with overflow handling and styling improvements - Added overflow handling to the queued send strip, allowing for better visibility of additional queued items when the list exceeds the visible limit. - Updated CSS styles for the chat components, including adjustments to layout, padding, and font sizes to improve overall aesthetics and usability. - Refactored the structure of the queued send row to utilize a grid layout, enhancing alignment and responsiveness of the elements within the chat interface. These changes improve the user experience by providing clearer visibility of queued messages and a more polished interface. * feat(database): add index for created_at and enhance comment retrieval - Introduced a new index on `preview_comments` for `created_at` to optimize query performance when retrieving comments. - Updated the `listPreviewComments` function to order results by `created_at` and `rowid`, improving the organization of displayed comments. - Enhanced the test suite to verify the injection of the new URL preview selection bridge and its functionality in various scenarios. These changes improve the efficiency of comment retrieval and enhance the user experience in the commenting interface. * feat(tooltip): implement tooltip system for enhanced user guidance - Introduced a new `TooltipLayer` component to manage tooltip display across the application, improving user interaction by providing contextual information on hover and focus. - Updated various components to utilize the tooltip system, including buttons and icons, ensuring consistent tooltip behavior and styling. - Enhanced CSS styles for tooltips, improving visibility and responsiveness, while maintaining a cohesive design across the application. These changes enhance the user experience by providing clearer guidance and improving the overall usability of interactive elements. * feat(tooltip): enhance tooltip integration across components - Updated various components to include tooltip functionality, improving user guidance with contextual information on hover and focus. - Added `data-tooltip` and `data-tooltip-placement` attributes to buttons and interactive elements for consistent tooltip behavior. - Enhanced CSS styles to ensure tooltips are displayed correctly and responsively, maintaining a cohesive design across the application. These changes improve the overall user experience by providing clearer guidance and enhancing the usability of interactive elements. * feat(project-view): refactor comment handling and enhance tooltip positioning - Introduced `mergeSavedPreviewComment` function to streamline the management of preview comments, improving clarity and maintainability. - Updated `ProjectView` to utilize the new comment merging function, enhancing the efficiency of comment updates. - Refactored `TooltipLayer` to use x and y coordinates for positioning, improving tooltip display accuracy and responsiveness. - Enhanced CSS styles for tooltips, ensuring better visibility and layout consistency across the application. These changes improve the user experience by providing more efficient comment handling and refined tooltip interactions. * feat(design-files): enhance workspace hint and file handling in project context - Introduced `formatDesignFilesWorkspaceHint` function to provide a detailed overview of the current Design Files workspace, including folder and file listings. - Added limits for the number of folders and files displayed to improve clarity and prevent overwhelming users with excessive information. - Updated the `startServer` function to integrate the new workspace hint, ensuring that the context of existing project files and folders is communicated effectively. - Enhanced tests for the new workspace hint functionality to ensure accurate representation of project context. These changes improve user experience by providing clearer insights into the Design Files workspace and facilitating better project management. * feat(composer): atomic @mention keyboard navigation and deletion * feat(database): add attachments_json field to comments and enhance migration logic - Introduced `attachments_json` field in the database schema for comments to support attachment storage. - Updated migration functions to include the new field, ensuring existing data is properly migrated. - Refactored related SQL queries to accommodate the new field, improving data handling for comments. These changes enhance the comment functionality by allowing attachments to be stored and retrieved effectively. * chore(nix): refresh pnpm deps hash * feat(chat-composer): implement design toolbox for enhanced design actions - Added a new design toolbox feature to the ChatComposer, allowing users to access various design actions such as 'auto-match', 'motion', and 'visual-polish'. - Introduced a state management system for the design toolbox, including hooks for opening and closing the toolbox. - Enhanced the user interface with new components and styles for the design toolbox, improving accessibility and usability. - Implemented functionality to apply design actions directly from the toolbox, streamlining the design workflow. - Added tests to ensure the correct behavior of the design toolbox and its interactions within the ChatComposer. These changes significantly enhance the design capabilities within the ChatComposer, providing users with a more efficient and intuitive design experience. * feat(chat-composer): enhance design toolbox resource management - Expanded the design toolbox functionality in ChatComposer to include a comprehensive resource index, allowing for better organization and retrieval of skills, plugins, MCP servers, templates, connectors, and project files. - Introduced new types and interfaces to support the expanded resource management, improving type safety and clarity in the codebase. - Updated the design toolbox action descriptions and search functionality to reflect the new resource capabilities, enhancing user experience. - Added tests to validate the new resource indexing and search features, ensuring robust functionality. These enhancements significantly improve the design workflow by providing users with a more organized and efficient way to access various design resources. * feat(workspace): enhance workspace context management and UI integration - Introduced a new function `renderWorkspaceContextToolHints` to provide contextual hints based on the type of workspace items (browser, terminal, files, live artifacts). - Updated `ChatComposer`, `ChatPane`, and `FileWorkspace` components to support and display workspace context items, improving user interaction and accessibility. - Enhanced the `QuickSwitcher` and `TabLauncherMenu` components to include workspace context items in search results, allowing users to navigate between tabs and files more efficiently. - Added new translations and updated existing ones to reflect the inclusion of workspace tabs in the user interface. These enhancements significantly improve the usability and functionality of the workspace, providing users with better context and navigation options. * test(e2e): assert Lexical composer content with toHaveText, not toHaveValue The chat composer and home hero input are now Lexical contenteditable editors, not native form controls, so Playwright's toHaveValue (form-only) fails with "Not an input element". Switch all chat-composer-input and home-hero-input content assertions to toHaveText, and assert multi-line soft-break cases with separate toContainText checks since the editor's textContent collapses the newline (the newline reaching the sent payload is already covered by downstream message/payload assertions). * chore(nix): refresh pnpm deps hash * chore(nix): refresh pnpm deps hash * test(e2e): open settings through the entry settings menu The home settings entry is now a menu (EntrySettingsMenu): clicking the gear opens a popover whose "Settings" item opens the full execution-mode dialog. Update the three specs that assumed a single click opened the dialog directly to go through the menu trigger + open-details item. * test(web): drive HomeView context picker through the Lexical helper The home hero input is a Lexical contenteditable, so fireEvent.change / reading .value throws "element does not have a value setter". Switch the MCP+connector first-turn-context spec to setHomeHeroPrompt / homeHeroPromptText like the rest of the file already does. * Fix PR review blockers * Update Nix pnpm deps hash * Enhance project folder routes with error handling and tests - Added checks for project existence in GET, POST, and DELETE folder routes, returning a 404 error if the project is not found. - Updated tests to verify 404 responses for unknown project IDs in folder operations. - Improved folder metadata handling in project routes. - Refactored the TabLauncherMenu component for better UI structure and scrolling behavior. - Adjusted styles for the TabLauncherMenu to improve usability and visual consistency. * Update ProjectView component and enhance design toolbox localization - Modified the ProjectView component to include workspacePanelTrack in chat panel width adjustments. - Updated localization files to add new keys and translations for the design toolbox in English, Simplified Chinese, and Traditional Chinese. - Enhanced user experience by providing comprehensive tooltips and prompts for design toolbox actions. * Add browser use prompt launcher * Cover browser use prompt launcher * Add design toolbox badge translations * Refactor ChatComposer and DesignBrowserPanel components - Removed the design system picker from the ChatComposer component and integrated it into the StagedRunContexts for better context handling. - Updated the DesignBrowserPanel to include a new function for determining viewport icons and modified the browser use categories to reflect changes in action prompts and titles. - Enhanced the HandoffButton component with a new feature to copy the project path to the clipboard, improving user experience. - Added new styles for search input and empty states in design files, enhancing the UI consistency across components. * Enhance ChatPane and DesignBrowserPanel components with new features and styles - Added scroll handling features to the ChatPane component, including scrollable state management and improved user experience during chat interactions. - Updated the DesignBrowserPanel to include new localization keys and improved category titles for better clarity in the browser use prompt. - Enhanced styles for chat log scrolling behavior, providing a more intuitive interface for users. - Implemented keyboard shortcuts for tab navigation in the WorkspaceTabsBar, improving accessibility and user efficiency. * Fix web workspace test hang * Update styles and functionality for workspace tabs and chat components - Adjusted CSS for the MAC_WINDOW_CHROME to improve spacing and margins for better layout. - Enhanced the ChatComposer component to ensure proper tab order and mention handling, improving user experience. - Implemented keyboard shortcuts for navigating workspace tabs, allowing for more efficient tab management. - Updated localization strings for clarity in search prompts across multiple languages. - Improved the HandoffButton component's UI for better visibility and interaction when copying project paths. * Update visual settings flow * Refresh Nix pnpm deps hashes --------- Co-authored-by: open-design-bot[bot] <282769551+open-design-bot[bot]@users.noreply.github.com> Co-authored-by: qiongyu1999 <2694684348@qq.com> Co-authored-by: Siri-Ray <2667192167@qq.com>
Open Design: The open-source Claude Design alternative
🔥 Open Design 0.9.0 is here: create without the setup. The official Model Router is built right into the app — no extra configuration, no CLI to install, no API key to prepare. Just open the app, sign in, and start designing and creating right away. Download 0.9.0 · Join the discussion
🏅 The Open Design Fellow program is now open. If you also believe design should be open — become an Open Design Fellow, shape the product alongside the core team, and help more people take part in defining the future of design. Details →
MAINTAINERS.mdand Discord.
Website · Download · Discord · Follow @nexudotio
English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe
What is Open Design
🎨 The local-first, open-source Claude Design alternative. 🖥️ Native desktop app for macOS and Windows. ⚡ 100+ skills · ✨ 150 brand-grade DESIGN.md systems · 📦 261 ready-to-use plugins. 🖼️ Generates web · desktop · mobile prototypes, live dashboards / artifacts, decks, images, video, plus HyperFrames motion graphics. 🔒 Sandboxed iframe preview · HTML / PDF / PPTX / MP4 export. 🤖 Runs on Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity and 21 local CLIs, or any OpenAI-compatible endpoint via BYOK.
Open Design is what you get when the agent-native loop Anthropic shipped with Claude Design — discover the brief, lock the direction, stream the artifact, critique, deliver — stops being closed and becomes a filesystem of skills, design systems, and plugins that the coding agents already on your laptop can read, write, and remix. Your CLI becomes the design engine, your laptop becomes the studio, and your team's DESIGN.md becomes the brand contract.
It's also the Figma alternative for the agent era — instead of pushing pixels on a canvas, it delivers single-page artifacts in real CSS, real fonts, real components, exported straight to HTML / PDF / PPTX / MP4 — already shaped by your design system, already runnable inside the agent you use every day.
Product tour
A quick look at what Open Design is and what it does. Start from Home, orchestrate repeat workflows with Automation, distill a brand contract in Design System, and extend with Plugins and integrations; inside any project's Studio, the same design system streams out prototypes, live artifacts, HyperFrames, decks, and images.
Core pages
 Home — the overview entry point. Pick a skill and a design system, type the brief, and kick off everything from one place. |
 Automation — orchestrate repetitive design workflows into reusable, schedulable automations. |
 Design System — distill your team's DESIGN.md into a brand contract that shapes every output.
|
 Plugin — browse, install, and distribute workflow plugins to extend generation on demand. |
 Integrations — connect external systems and MCP tools, and use Open Design from any IDE, script, or automation. |
Studio — many artifact types in one project
Inside a project's Studio, the same design system streams out multiple artifact types:
 Prototype — single-page HTML artifacts that read your design system and render in a sandboxed iframe, previewable instantly and downloadable as source. |
 HyperFrame — programmatic motion and animated graphics, rendered to a real MP4 (e.g. 1920×1080 · 30fps). |
 Deck — pitch decks you can page through, navigate by keyboard, and export to PPTX / PDF. |
 Image — brand-grade images and visual assets, with high-resolution generation and download. |
Platform Compatibility
Open Design ships as skills, a CLI, and an MCP server that mainstream coding agents consume natively. Once OD is installed, a single
od mcp install <agent>wires the MCP server into that agent's config, and you call the same tools from inside any agent.
| Coding agent / platform | Status | One-line MCP server install |
|---|---|---|
| Claude Code | ✅ Supported | od mcp install claude |
| Codex CLI | ✅ Supported | od mcp install codex |
| Cursor | ✅ Supported | od mcp install cursor |
| VS Code + GitHub Copilot | ✅ Supported | od mcp install copilot |
| GitHub Copilot CLI | ✅ Supported | od mcp install copilot |
| Gemini CLI | ✅ Supported | od mcp install gemini |
| OpenCode | ✅ Supported | od mcp install opencode |
| OpenClaw | ✅ Supported | od mcp install openclaw |
| Antigravity | ✅ Supported | od mcp install antigravity |
| Cline | ✅ Supported | od mcp install cline |
| Trae | ✅ Supported | od mcp install trae |
| Kimi CLI | ✅ Supported | od mcp install kimi |
| Pi Agent | ✅ Supported | od mcp install pi |
| Mistral Vibe CLI | ✅ Supported | od mcp install vibe |
| Hermes Agent | ✅ Supported | od mcp install hermes |
od mcp install <agent> --print for a dry-run preview · --uninstall to remove · full list with od mcp install --help.
No CLI installed? The BYOK proxy at POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream gives you the same loop (no process spawn) — paste baseUrl + apiKey + model, with support for OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Per-target SSRF protection blocks internal IPs / link-local / CGNAT at the daemon edge.
The adapter contract and stream parsers live in apps/daemon/src/agents.ts. Adding a new CLI is one entry — see docs/agent-adapters.md.
Demo
Four core product categories, all rendered by a coding agent running on your laptop. Click a thumbnail to see the real example.
1 · Prototypes — web · desktop · mobile
The default output surface. Single-page HTML artifacts that read your DESIGN.md and render in a sandboxed iframe.
 Entry view — pick a skill, pick a design system, type the brief. One surface for prototypes, dashboards, decks, mobile apps, magazine pages. |
 Mobile prototype — pixel-accurate iPhone 15 Pro chrome, multi-screen flows. The agent never redraws the phone frame; shared device frames live in assets/frames/.
|
 Web prototype — an editorial dashboard with scrollbars, KPIs, and charts. Rendered straight from design-templates/dating-web/.
|
 Mobile app prototype — a three-screen gamified flow with XP ribbons and quest detail. Hand off straight to Cursor / Codex / Claude Code to turn into React/Next/Vue. |
2 · Live artifacts & dashboards
Live dashboards, decision rooms, KPI walls — single-page artifacts that pull data through a tweaks panel and stay editable in place.
 Live dashboard — an editable KPI wall whose tweaks panel surfaces the parameters worth nudging. The agent emits a manifest, and the iframe re-renders without a reload. |
 Decision room — a multi-source briefing artifact for product / research / ops meetings. |
 GitHub-style dashboard — repo metrics presented as a live artifact. |
 Flow live-dashboard template — a domain-specific KPI template, branded through the active DESIGN.md.
|
3 · Decks — magazine decks, weekly updates, pitches
 Deck mode (guizang-ppt) — magazine layouts, WebGL hero, P0/P1/P2 checklists. Bundled verbatim from op7418/guizang-ppt-skill with its original license preserved.
|
 Swiss International-style deck — grid-anchored, monochrome accents. One of 15 deck templates and 36 themes under design-templates/html-ppt-*/.
|
Every deck exports to HTML (single file, inlined assets), PDF (browser print, deck-aware), PPTX (agent-driven skill), ZIP (archive), or Markdown.
4 · Images — gpt-image-2, ImageRouter, custom API
 Illustrated city food map Hand-drawn editorial travel poster |
 Cinematic elevator scene Single-frame editorial still |
 Cyberpunk portrait Profile avatar — neon face text |
 3D stone staircase Hewn-stone infographic |
 Glamorous portrait Editorial studio shot |
93 ready-to-replicate prompts live in prompt-templates/ — preview thumbnails, full prompt body, target model, aspect ratio, and source attribution. One click drops a brief into the composer.
5 · Video & HyperFrames — agent-native motion graphics
HyperFrames is HeyGen's open-source, agent-native video framework, integrated as a first-class citizen in Open Design. The agent writes HTML + CSS + GSAP, and HyperFrames renders it to a deterministic MP4 via headless Chrome + FFmpeg. Pair it with Seedance 2.0 for cinematic t2v / i2v, Veo 3 / Sora 2 / Kling 2 for routed model variants, and Suno v5 / Lyria 2 for the audio layer.
 30s SaaS product promo · 16:9 · UI 3D reveals |
 TikTok karaoke talking-head · 9:16 · TTS + word-synced captions |
 30s brand sizzle reel · 16:9 · audio-reactive kinetic type |
 Bar chart race · 16:9 · NYT-style data infographic |
 Flight map · 16:9 · Apple-style route reveal |
4s cinematic logo outro · 16:9 · piece-by-piece assembly + bloom |
 $0 → $10K money counter · 9:16 · Apple-style hype |
 Website-to-video · 16:9 · captures the site at 3 viewports |
11 HyperFrames templates + 39 Seedance prompts ship with the repo. Catalog thumbnails © HeyGen; the framework is Apache-2.0. The OD-specific render workflow (composition cache, sandbox-exec workaround, MP4-as-chip) is detailed in design-templates/hyperframes/.
Why Open Design
In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly. It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic's model, Anthropic's skills, Anthropic's surface. No checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent.
Open Design (OD) is the open-source alternative. Same loop, same artifact-first mental model, none of the lock-in:
- 🤖 Agent-native, model-agnostic. We don't ship an agent. The
claude/codex/cursor-agent/copilot/hermes/kimialready on yourPATHare the design engine. Swap with one click. - 🧠 Brand-grade by default. Every render reads the active
DESIGN.md— a 9-section schema covering palette, type, spacing, motion, voice, anti-patterns. 150 systems ship with the repo (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Drop a folder in, the picker finds it. - 🖥️ Local-first, BYOK at every layer. Native desktop apps for macOS (Apple Silicon + Intel) and Windows (x64). Linux AppImage on the optional release lane. SQLite at
.od/app.sqlite, files at.od/projects/<id>/, no telemetry, no cloud round-trip. - 🌍 Composable on three planes. Plugins carry runnable workflows · skills carry the agent's design taste · design systems carry the brand. All three are plain files anyone can author, version, and publish.
- 🔁 Refresh an existing codebase. Hand a
gitrepo +DESIGN.mdto the agent and it refactors your real components to the brand spec. Dedicated plugins migrate Figma / Pencil workflows into React / Next.js / Vue code. - 🔒 Privacy by conviction. Everything runs where your data lives — your laptop, your team's server, your Vercel project. When the network is needed, the BYOK proxy is SSRF-guarded.
Comparison
| Claude Design | Figma | Lovable / v0 / Bolt | Open Design | |
|---|---|---|---|---|
| Open source | ❌ | ❌ | ❌ | ✅ Apache-2.0 |
| Self-host / desktop | ❌ | ❌ | ❌ | ✅ macOS + Windows + Vercel |
| Agent-native (runs in your CLI) | Anthropic only | ❌ | Cloud agent only | ✅ 21 CLIs + BYOK |
Brand-grade DESIGN.md |
Proprietary | Theme JSON | Limited tokens | ✅ 150 systems shipped |
| Skills / plugins / templates | Closed | Plugin store | Closed | ✅ 100+ skills · 261 plugins |
| HyperFrames (HTML→MP4) | ❌ | ❌ | ❌ | ✅ First-class |
| Refresh an existing repo to brand | ❌ | ❌ | ❌ | ✅ via agent + DESIGN.md |
| Minimum billing | Pro / Max / Team | Pro / Org | Pro / Team | BYOK · any compatible endpoint |
Quick start
🖥️ Download the desktop app (recommended — zero config)
The fastest way to use Open Design. No Node, no pnpm, no clone.
- macOS (Apple Silicon · Intel x64) → open-design.ai or GitHub Releases
- Windows (x64) → open-design.ai or GitHub Releases
- Linux (AppImage, optional lane) → GitHub Releases
After install: the app auto-detects every coding-agent CLI on your PATH, loads 100+ skills and 150 design systems, and lets you type a brief in the entry view.
🤖 Install into your coding agent (no UI)
You can use Open Design without ever opening the GUI — call it as a skill, plugin, or MCP server inside Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi, and more.
# One-line install into the agent you're using:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
# | pi | vibe | hermes | cline | kimi | trae | opencode
Then, inside the agent:
> Use open-design to generate a landing page with the Linear design system
The agent reads skills/, picks the right SKILL.md, binds the DESIGN.md you named, and emits an <artifact> previewable at http://localhost:7456.
🐳 Run with Docker
git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://localhost:7456
🧑💻 Run from source
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web
Node ~24, pnpm 10.33.x. Windows users, see docs/windows-troubleshooting.md. Full quickstart, env vars, Nix flake, and packaged build flow → QUICKSTART.md.
A full workflow — from brief to artifact
brief → plugin → direction → design system → artifact → handoff → memory
- A PM submits a brief. The plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard…
- A designer (or the agent) locks the direction. No brand? Pick from 5 curated directions. Have a brand? Drop a screenshot / URL → the agent connects GitHub, imports Figma, and codifies a reusable
DESIGN.md. - The agent emits the first
<artifact>. Plugin + skill +DESIGN.mdare bound. It streams into a sandboxed iframe, editable in place — not "regenerate from scratch." - Hand off to engineering. The artifact is real HTML/CSS — drop it into Cursor, Codex, or Claude Code to keep building as code. Or export PPTX / PDF / MP4 straight to marketing.
- Open Design gets smarter as you use it. Your screenshots, fonts, palettes, and confirmed artifacts accumulate as defaults for the next session. Less rework, less drift.
Use Open Design from your coding agent
Open Design ships a stdio MCP server and per-agent install scripts. Any MCP-compatible agent in another repo can read files from your local Open Design projects directly — tokens CSS, JSX components, entry HTML — as a structured API queryable by name. The agent always sees the live file, not a stale export.
# One-line install (16+ CLIs supported):
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# Then the agent can:
od search-files "primary button" # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug> # latest rendered artifact
od plugin run web-prototype --brief "..."
od skill list --scenario marketing
Why MCP? Exporting and re-attaching a zip every iteration breaks flow. MCP exposes the design source directly — the agent always sees the live file.
For an agent starting from scratch, the installer places ~/.config/<agent>/open-design.json (or the platform equivalent) plus a copy-paste MCP snippet. Cursor gets a one-click deeplink; Claude Code gets a claude mcp add-json one-liner; every other agent gets JSON in the schema its config expects. Full per-agent flow → Settings → MCP server in the desktop app, or docs/agent-adapters.md.
Security model. Read-only by default, the daemon binds to 127.0.0.1, and SSRF is blocked at the proxy edge. LAN exposure requires an explicit OD_BIND_HOST plus OD_ALLOWED_ORIGINS. Connector credentials and live-artifact preview routes stay loopback-only regardless.
Skills
100+ skills ship in the box — each is a folder under skills/ following the Claude Code SKILL.md convention, extended with an od: frontmatter (mode, platform, scenario, preview.type, design_system.requires, default_for, fidelity, example_prompt). Drop a folder in, restart the daemon, it appears in the picker.
Two modes anchor the catalog: prototype (web/mobile/desktop single-page artifacts) and deck (horizontal-swipe presentations). Also image, video, audio, template, design-system, and utility modes. The scenario field groups them by audience: design · marketing · operation · engineering · product · finance · hr · sale · personal.
| Skill | Mode | Scenario | What it produces |
|---|---|---|---|
web-prototype |
prototype | design | Default landing page / hero |
saas-landing |
prototype | marketing | Hero / features / pricing / CTA |
dashboard |
prototype | operation | Admin / analytics (with sidebar) |
mobile-app |
prototype | design | iPhone 15 Pro / Pixel framed app |
mobile-onboarding |
prototype | design | Splash · value-prop · sign-in flow |
social-carousel |
prototype | marketing | 3-card 1080×1080 carousel |
email-marketing |
prototype | marketing | Table-fallback-safe brand email |
magazine-poster |
prototype | marketing | Single-page magazine layout |
motion-frames |
prototype | marketing | Looping CSS motion hero |
sprite-animation |
prototype | marketing | 8-bit pixel animated explainer |
pm-spec |
prototype | product | PM spec doc (with TOC + decision log) |
team-okrs |
prototype | product | OKR scorecard |
eng-runbook |
prototype | engineering | Incident runbook |
finance-report |
prototype | finance | Exec finance summary |
hr-onboarding |
prototype | hr | Role onboarding plan |
guizang-ppt |
deck | marketing | Magazine-style web PPT (deck default) |
html-ppt-* |
deck | marketing | 15 deck templates × 36 themes (master template in design-templates/html-ppt/) |
hyperframes |
video | marketing | HTML → MP4 motion graphics (HeyGen OSS framework) |
critique |
utility | design | Five-dimensional self-critique scoresheet |
tweaks |
utility | design | AI-emitted tweaks-panel manifest |
Full skill protocol → docs/skills-protocol.md. Skill registry endpoint: GET /api/skills.
Design Systems
150 brand-grade DESIGN.md systems ship with the repo — each a single Markdown file with a 9-section schema (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns), from VoltAgent/awesome-design-md. Switch a system → the next render uses the new tokens. No theme JSON.
Full catalog (click to expand)
AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai
Developer Tools — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent
Productivity — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast
Fintech — stripe · coinbase · binance · kraken · mastercard · revolut · wise
E-commerce — shopify · airbnb · uber · nike · starbucks · pinterest
Media — spotify · playstation · wired · theverge · meta
Automotive — tesla · bmw · ferrari · lamborghini · bugatti · renault
Other — apple · ibm · nvidia · vodafone · resend · spacex
Starters — default (Neutral Modern) · warm-editorial
Re-import the library via scripts/sync-design-systems.ts. Add your own brand → drop a DESIGN.md into design-systems/<brand>/. Full guide → design-systems/README.md.
Plugins
261 official plugins live in plugins/_official/. Each plugin is a portable agent-skill folder — a SKILL.md (readable by any agent that supports Agent Skills), plus an optional open-design.json manifest that gives Open Design marketplace metadata, inputs, previews, pipelines, and capability declarations. Jump straight to a category:
| Category | Count | Contents |
|---|---|---|
scenarios/ |
11 | Complete design scenarios — od-default, od-design-refine, od-figma-migration, od-code-migration, od-react-export, od-nextjs-export, od-vue-export, od-media-generation, od-new-generation, od-tune-collab, od-plugin-authoring |
image-templates/ |
45 | One-shot image prompts — editorial, cinematic, product, portrait |
video-templates/ |
50 | HyperFrames / Seedance / Veo motion templates |
design-systems/ |
142 | Brand DESIGN.md wrapped as plugins |
atoms/ |
13 | Reusable UI fragments (buttons, heroes, KPI cards) |
examples/ |
140 | Remixable reference outputs |
Also plugins/community/ for community plugins and plugins/registry/ for the publishing flow.
What plugins can do
- 🤖 Run in any coding agent — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… through the same skill protocol the agent already knows.
- 🔁 Migrate Figma / Pencil workflows → React, Next.js, or Vue source. See
od-figma-migration. - 🛠️ Refresh an existing codebase to a brand spec — point a plugin at a
gitrepo +DESIGN.md, get a PR. Seeod-code-migration. - 💾 Persist custom workflows — your team's reusable templates sit next to the shipped ones.
Using plugins
Plugins are at full parity across the web UI and the od CLI — same /api/plugins endpoints, pick whichever fits.
In the desktop / web app: open the Plugin page to browse the marketplace and click Install; inside a project's Studio, plugins appear as composer chips you click to apply (with the inputs they declare).
On the command line (runs without a UI — this is the path external agents use):
od plugin list # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page" # search by keyword
od plugin info od-default # inspect a plugin's metadata, inputs, capabilities
od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default # upgrade
od plugin uninstall od-default # uninstall
Every command supports --json, so you can pipe it through jq / xargs into automation.
Building a plugin
A plugin needs only a SKILL.md at minimum; to list it in the Open Design marketplace, add an open-design.json:
my-plugin/
├── SKILL.md ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── README.md ← optional: usage, install, registry links
├── preview/ ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/ ← optional: concrete use cases
Core open-design.json fields: specVersion (currently 1.0.0), name (stable ID), version (semver), compat.agentSkills[].path (points at ./SKILL.md), od.kind (skill / scenario / atom / bundle), od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode (the output surface, e.g. prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario), od.capabilities[] (declare the minimum — a restricted install grants only prompt:inject by default), od.inputs[] (apply-time parameters).
Scaffold + validate locally:
od plugin scaffold --id my-plugin --title "My Plugin" # generate the skeleton
od plugin validate ./my-plugin # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck
Full field set and runtime contract → plugins/spec/SPEC.md; developing a plugin with a coding agent → plugins/spec/AGENT-DEVELOPMENT.md; copy-paste minimal templates → plugins/spec/examples/.
Contributing a plugin
- Drop the plugin folder into
plugins/community/(third-party plugins), or — to ship it bundled with Open Design — into the matching tier ofplugins/_official/. - Pass validation:
od plugin validate,pnpm guard,pnpm --filter @open-design/plugin-runtime typecheck. - Fill the PR using the template in
plugins/spec/CONTRIBUTING.md(ID, version, lane, mode, capabilities, trigger examples; attach a screenshot / preview for visual plugins). - To publish to an external registry (skills.sh / ClawHub / standalone GitHub) →
plugins/spec/PUBLISHING-REGISTRIES.md.
Plugin registry endpoint: GET /api/plugins. Directory overview → plugins/README.md (简体中文).
Architecture
┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│ chat · file workspace · iframe preview · settings · import · MCP │
└──────────────┬─────────────────────────────────────┬─────────────────┘
│ /api/* │
▼ ▼
┌─────────────────────────────────┐ /api/proxy/{provider}/stream (SSE)
│ local daemon (Express+SQLite) │ ─→ any OpenAI-compatible BYOK,
│ │ SSRF-guarded at the edge
│ /api/skills /api/plugins │
│ /api/design-systems │
│ /api/chat (SSE) /api/proxy/* │
│ /api/projects/:id/files/... │
│ /api/artifacts/{save,lint} │
│ /api/import/claude-design │
│ MCP stdio server │
└─────────┬───────────────────────┘
│ spawn(cli, [...], { cwd: .od/projects/<id> })
▼
┌──────────────────────────────────────────────────────────────────┐
│ claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
│ gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) · │
│ pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek │
│ reads SKILL.md + DESIGN.md, writes artifacts to disk │
└──────────────────────────────────────────────────────────────────┘
| Layer | Stack |
|---|---|
| Frontend | Next.js 16 App Router + React 18 + TypeScript |
| Daemon | Node 24 · Express · SSE streaming · better-sqlite3 |
| Storage | Files at .od/projects/<id>/ + SQLite at .od/app.sqlite + media-config.json (gitignored, auto-created). OD_DATA_DIR relocates everything. |
| Preview | Sandboxed srcdoc iframe + streaming <artifact> parser |
| Export | HTML (inlined) · PDF (browser print) · PPTX (agent-driven) · ZIP · Markdown · MP4 (HyperFrames) |
| Desktop | Electron shell + sandboxed renderer + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN) |
| Lifecycle | One entry point: pnpm tools-dev (start / stop / run / status / logs / inspect / check) |
Full architecture → docs/architecture.md. Skill protocol → docs/skills-protocol.md. Agent adapter contract → docs/agent-adapters.md.
Roadmap
- Daemon + 21 coding-agent CLI adapters + skill registry + design-system catalog
- Web app + chat + question form + 5-direction picker + todo progress + sandboxed preview
- 100+ skills · 150 design systems · 5 visual directions · 5 device frames
- SQLite-backed projects · conversations · messages · tabs · templates
- Multi-provider BYOK proxy (
/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) + SSRF guard - Claude Design ZIP import (
/api/import/claude-design) - Sidecar protocol + Electron desktop + IPC automation
- Artifact lint API + 5-dim self-critique pre-emit gate
- 0.8.0 — plugin marketplace infrastructure (261 official plugins, manifest spec, per-agent install scripts)
- 0.9.0 — Open Design AMR (official Model Router built into the app: zero config, one-click sign-in)
- Packaged Electron builds — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (optional lane)
- Comment-mode surgical edits — partially shipped; reliable targeted patching in progress
- AI-emitted tweaks panel UX — not yet implemented
npx od initto scaffold a project withDESIGN.md- Plugin SDK +
od plugin {add,list,remove,test,publish}CLI - Figma / Pencil → React / Next / Vue migration plugins (alpha)
- Refresh-existing-codebase plugin (point at a git repo +
DESIGN.md)
Phased delivery → docs/roadmap.md.
Community
Real people behind every channel.
- 💬 Discord — daily chat, plugin sharing, questions → discord.gg/qhbcCH8Am4
- 🐦 X / Twitter — release notes, milestones, behind the scenes → @nexudotio
- 🗣️ GitHub Discussions — deep Q&A, RFCs, "show your work" → Discussions
- 🐛 GitHub Issues — bug reports, feature requests → Issues
The good-first-issue and help-wanted labels are the easiest way in.
Contributing
Open Design keeps moving because contributors — designers, engineers, prompt authors — keep showing up. Many of the most-used skills, design systems, and plugins were written by people outside the core team.
🎯 Where to start (max leverage, min change)
| Want to ship… | How | Where |
|---|---|---|
| A new skill | Drop a folder with SKILL.md + assets/ + references/ |
skills/ · spec in docs/skills-protocol.md |
| A new design system | Drop a DESIGN.md using the 9-section schema |
design-systems/<brand>/ |
| A new plugin | Drop open-design.json + manifest under a category folder |
plugins/community/ · spec in plugins/spec/SPEC.md · agent dev guide in plugins/spec/AGENT-DEVELOPMENT.md |
| Support a new coding-agent CLI | One adapter entry + stream parser | apps/daemon/src/agents.ts |
| Fix a bug or polish UI | Browse the good-first-issue label |
Issues → |
| Translate the docs | Update the README.<lang>.md files |
TRANSLATIONS.md |
🤖 Contributing as an agent
If you are the agent reading this, the fastest path is:
# 1. Boot locally
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web
# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number> # create a branch and worktree
# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test
# 4. Open the PR
gh pr create --fill
Full agent-friendly contribution flow, code style, and PR bar → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · Português).
🏅 Open Design Fellow program
We're recruiting Open Design Fellows around the world — Fellows shape the product alongside the core team, represent Open Design officially in their region, and grow the community locally, backed by funded support ($1,000 / MR), free LLM credits, and a direct review track. Details → MAINTAINERS.md and the announcement on Discord.
Maintainers
They carry a lot of the load — daily maintenance, review, and community support.
 @Nagendhra-web Maintainer |
 @Sid-Qin Maintainer |
Maintainer rules, promotion criteria, and the exit protocol → MAINTAINERS.md (also Deutsch · Français · 简体中文 · 日本語 · Português).
Contributors
Thanks to everyone who has taken part — code, docs, feedback, a sharp issue, a new skill, a new design system.
Repository activity
The SVG above is regenerated daily by .github/workflows/metrics.yml using lowlighter/metrics.
Star us
If this saved you thirty minutes, give it a ★. Stars don't pay rent — but they tell the next designer, agent, and contributor that this experiment is worth their attention. One click, three seconds, a real signal.
References & lineage
| Project | Role |
|---|---|
| Claude Design | The closed-source product this repo is the open-source alternative to. |
alchaincyf/huashu-design |
The design-philosophy compass — junior-designer workflow, brand-asset protocol, anti-AI-slop checklist, five-dimensional critique. |
op7418/guizang-ppt-skill |
The magazine-style web PPT skill, bundled verbatim under design-templates/guizang-ppt/. Default for deck mode. |
lewislulu/html-ppt-skill |
The HTML PPT Studio family — 15 deck templates, 36 themes, 31 page layouts, animation runtime, magnetic-card presenter mode. |
OpenCoworkAI/open-codesign |
The first open-source Claude Design alternative; UX patterns we borrow (streaming-artifact loop, sandboxed iframe, live agent panel). |
multica-ai/multica |
The daemon + adapter architecture — PATH-scan agent detection, local daemon as the only privileged process. |
VoltAgent/awesome-design-md |
Source of the 9-section DESIGN.md schema and 70 product systems. |
bergside/awesome-design-skills |
Source of the 57 design skills added under design-systems/. |
heygen-com/hyperframes |
The HTML→MP4 motion-graphics framework, integrated as the first-class hyperframes-html in Open Design. |
| Claude Code skills | The SKILL.md convention we adopt verbatim. |
Detailed provenance → docs/references.md.
License
Apache-2.0. The bundled design-templates/guizang-ppt/ retains its original LICENSE (MIT, @op7418). The bundled design-templates/html-ppt/ retains its original LICENSE (MIT, @lewislulu).