Use when: Starting a new development project involving design-to-code transfer.
How it works:
Define the project's overall architecture and rules before commencing coding.
Set conventions for component building, file structuring, and naming.
Align with all stakeholders on these foundational structures to ensure consistency.
Tip: Establishing a robust architecture upfront minimizes deviations and ensures smoother integration of components throughout the project.
Use when: Integrating new screens or features into a development project.
How it works:
Identify missing components in the current library for the new screen or feature.
Instruct the AI or developers to create these components first.
Proceed to integrate these components into the screen layout only after they are developed.
Tip: Building components first helps maintain a consistent style across the project and simplifies further expansions.
Use when: Instructing AI or team members to generate or review code.
How it works:
Provide maximum context, including global style guides, existing architecture, and code references, to the AI or team members.
Emphasize the reuse of existing components to maintain design consistency.